핵심 구성 요소의 이미지 구성 요소는 바로 편집 기능이 있는 적응형 이미지 구성 요소입니다.
이미지 구성 요소에는 페이지 방문자의 소극적 로드와 콘텐츠 작성자의 간단한 이미지 배치 및 자르기 옵션이 있는 적응형 이미지 선택 기능과 반응 동작이 포함됩니다.
템플릿 작성자는 디자인 대화 상자에서 이미지 폭 및 추가 설정 옵션을 정의할 수 있습니다. 콘텐츠 편집기는 구성 대화 상자에서 에셋을 업로드하거나 선택할 수 있습니다.
현재 버전의 이미지 구성 요소는 2022년 2월 핵심 구성 요소 릴리스 2.18.0과 함께 도입된 v3입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.
다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.
구성 요소 버전 | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v3 | - | 호환 가능 | 호환 가능 |
v2 | 호환 가능 | 호환 가능 | 호환 가능 |
v1 | 호환 가능 | 호환 가능 | 호환 가능 |
핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.
이미지 구성 요소에는 즉시 사용 가능한 강력한 반응형 기능이 제공됩니다. 페이지 수준에서 디자인 대화 상자를 사용하여 이미지 에셋의 기본 폭을 정의할 수 있습니다. 브라우저 창의 크기에 따라 이미지 구성 요소는 올바른 폭을 자동으로 로드하여 표시합니다. 창의 크기가 조정되면 이미지 구성 요소는 즉시 올바른 이미지 크기를 자동으로 로드합니다. 이미지 구성 요소가 이미 콘텐츠 로드에 최적화되었기 때문에 구성 요소 개발자는 맞춤형 미디어 쿼리를 정의하는 데 걱정할 필요가 없습니다.
또한, 이미지 구성 요소는 소극적 로드를 지원하여 브라우저에 표시될 때까지 실제 이미지 에셋 로드를 지연합니다. 이로써 페이지의 응답성이 향상될 수 있습니다.
기본적으로 이미지 구성 요소는 응용 이미지 서블릿으로 제공됩니다. 문서 보기 응용 이미지 서블릿 를 참조하십시오.
이미지 구성 요소(릴리스 2.13.0부터)는 Dynamic Media 에셋을 지원합니다. 활성화되면 다른 이미지에서와 마찬가지로 이 기능의 간단한 드래그 앤 드롭이나 에셋 브라우저를 통해 Dynamic Media 이미지 에셋을 추가할 수 있습니다. 또한 이미지 수정자, 이미지 사전 설정 및 스마트 자르기를 지원합니다.
핵심 구성 요소가 내장된 웹 경험에는 Sensei에서 지원하는 강력한 고성능 크로스 플랫폼 Dynamic Media 이미지 기능이 포함될 수 있습니다.
이미지 구성 요소는 확장 가능한 벡터 그래픽(SVG)을 지원합니다.
보안상 이유로 이미지 편집기에서 바로 최초 SVG를 호출하지 않습니다. <img src=“path-to-component”>
를 통해 호출됩니다. 이렇게 하면 브라우저는 SVG 파일에 임베드된 스크립트를 실행할 수 없습니다.
SVG 지원에는 구성 요소 릴리스 2.1.0 이상이 필요하고, 이와 더불어 AEM 내 이미지 편집기 기능 지원에는 AEM 6.4 이상의 서비스 팩 2가 필요합니다.
이미지 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.
이미지 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.
핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.
이미지 구성 요소는 schema.org microdata를 지원합니다.
이미지 구성 요소는 설명 및 기본 속성과 함께 이미지 자체를 정의하는 구성 대화 상자를 제공합니다.
페이지에서 추천 이미지 상속 옵션은 링크된 페이지의 추천 이미지를 사용하거나 이미지가 링크되지 않은 경우 현재 페이지의 추천 이미지를 사용합니다.
접근성을 위한 대체 텍스트 필드에서는 시각 장애인 독자를 위한 이미지 설명을 정의할 수 있습니다.
dc:description
메타데이터 또는 연결된 에셋이 없는 경우 현재 페이지의 연결된 에셋 값에 대한 대체 설명을 사용합니다.이미지 에셋
대체 텍스트를 제공하지 않음 옵션은 이미지가 단순히 장식용이거나 페이지에 추가 정보를 전달하지 않는 경우 화면 판독기와 같은 보조 기술에서 무시되도록 이미지를 표시합니다.
&
로 구분하여 정의할 수 있습니다.dc:title
메타데이터 값으로 채워집니다.스마트 자르기와 이미지 사전 설정은 함께 수행할 수 없는 옵션입니다. 작성자가 스마트 자르기 렌디션과 함께 이미지 사전 설정을 사용해야 한다면 이미지 수정자를 사용해야 합니다.
이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.
드롭다운을 사용하여 구성 요소에 적용할 스타일을 선택합니다. 편집 대화 상자에서 선택한 항목은 구성 요소 툴바에서 선택한 항목과 동일한 효과를 가집니다.
드롭다운 메뉴를 사용하려면 디자인 대화 상자에서 이 구성 요소에 대한 스타일을 구성해야 합니다.
이미지에 대해 허용된 너비 목록을 픽셀 단위로 정의하면 구성 요소는 브라우저 크기에 따라 가장 적절한 너비를 자동으로 로드합니다. 이는 이미지 구성 요소 반응형 기능의 주요 부분입니다.
폭을 정의함으로써 렌디션 선택을 최적화하기 위한 팁과 관련된 자세한 내용은 적응형 이미지 서블릿 섹션을 참조하십시오.
이미지 구성 요소는 AEM 스타일 시스템을 지원합니다.
이미지 구성 요소는 Adobe 클라이언트 데이터 레이어를 지원합니다.