가져온 이미지는 AEM Edge Delivery Services에서 응답형 에셋 대신 정적으로 렌더링됩니다.

Adobe Experience Manager(AEM) Edge Delivery Services에서 페이지로 가져온 이미지는 반응형 Dynamic Media 에셋 대신 정적 이미지로 렌더링될 수 있습니다. 따라서 이미지는 여러 이미지 크기의 자동 생성 또는 변환과 같은 Dynamic Media 기능의 혜택을 받지 않습니다. 이 문제를 해결하려면 지원되는 AEM Assets 게재 URL을 사용하여 응답형 이미지 마크업을 생성합니다.

설명 description

환경

  • Adobe Experience Manager (AEM) Edge Delivery Services
  • AEM 클라우드 서비스

문제/증상

  • 페이지로 가져온 이미지는 반응형 Dynamic Media 에셋 대신 정적 이미지로 렌더링됩니다.
  • 이미지는 여러 이미지 크기의 자동 생성 또는 변환과 같은 Dynamic Media 기능의 혜택을 받지 않습니다.
  • 이 문제는 일반적으로 이미지 참조가 프로그래밍 방식으로 채워지는 자동화된 마이그레이션 중에 발생합니다.
  • 오류 메시지는 표시되지 않지만 이미지에 반응형 동작이 나타나지 않습니다.

해결 방법 resolution

아래 단계에 따라 문제를 해결하십시오.

  1. AEM Cloud Service 인스턴스에서 이미지가 승인된 AEM Assets으로 업로드되거나 해결되었는지 확인합니다.

  2. 각 이미지에 대해 지원되는 AEM Assets 게재 URL을 가져옵니다. Assets OpenAPI를 사용하거나 해당 jcr:uuid을(를) 통해 에셋을 확인하고 게재 URL을 검색하여 이렇게 하십시오.

  3. AEM Assets 게재 URL을 사용하여 응답형 이미지 마크업을 생성하도록 가져오기 또는 EDS 블록 논리를 업데이트합니다. Dynamic Media 변환을 사용하려면 너비, 자르기, 형식 및 품질에 대한 매개 변수를 포함하십시오.

    응답형 이미지 마크업 예:

    code language-none
    <img src="https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80"
    srcset="https://assets.example.com/asset-id.jpg?width=400&format=webp&quality=80 400w,
    https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80 800w,
    https://assets.example.com/asset-id.jpg?width=1200&format=webp&quality=80 1200w"
    sizes="(max-width: 800px) 100vw, 800px"
    alt="Description of image">
    
  4. EDS 블록에서 렌더링 시 응답형 마크업을 생성하는 데 사용할 수 있도록 가져온 콘텐츠에 게재 URL 참조를 저장합니다.

  5. 렌더링된 페이지를 테스트하여 이미지가 응답적으로 전달되고 Dynamic Media 변형이 적용되는지 확인합니다.

관련 읽기

recommendation-more-help
experience-cloud-kcs-help-kbarticles