가져온 이미지는 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
아래 단계에 따라 문제를 해결하십시오.
-
AEM Cloud Service 인스턴스에서 이미지가 승인된 AEM Assets으로 업로드되거나 해결되었는지 확인합니다.
-
각 이미지에 대해 지원되는 AEM Assets 게재 URL을 가져옵니다. Assets OpenAPI를 사용하거나 해당
jcr:uuid을(를) 통해 에셋을 확인하고 게재 URL을 검색하여 이렇게 하십시오. -
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"> -
EDS 블록에서 렌더링 시 응답형 마크업을 생성하는 데 사용할 수 있도록 가져온 콘텐츠에 게재 URL 참조를 저장합니다.
-
렌더링된 페이지를 테스트하여 이미지가 응답적으로 전달되고 Dynamic Media 변형이 적용되는지 확인합니다.
experience-cloud-kcs-help-kbarticles