대화형 통신 편집기의 이미지 필드 구성 요소
aem-forms-ea@adobe.com으로 이메일을 보내시기 바랍니다.1. 소개
대화형 통신 편집기의 이미지 필드 구성 요소를 사용하여 작성자는 통신 레이아웃에 이미지를 삽입할 수 있습니다. 사진 식별, 문서 확인 또는 최종 사용자에게 이미지를 표시해야 하는 시각적 유효성 검사와 같은 사용 사례에 이상적입니다.
JPEG 및 PNG 와 같은 일반적인 형식을 지원하는 이 구성 요소는 유연한 구성 옵션을 제공하여 이미지의 표시, 저장 및 스타일 지정 방법을 정의합니다. 작성자는 이미지 필드에 이름 또는 레이블을 지정 할 수도 있으므로 레이아웃 명확성과 조직이 향상됩니다.
2. 속성
이미지 필드 구성 요소에는 구성 가능한 몇 가지 속성이 포함됩니다.
2.1. 기본 필드
-
이름: 데이터 모델 및 규칙을 참조하는 데 사용되는 필드의 고유 식별자를 정의합니다.
-
캡션: 인터페이스에서 사용자에게 표시되는 레이블을 표시합니다.
-
이미지 선택: 작성자는 로고, ID 또는 기타 시각적 요소에 일반적으로 사용되는 이 속성을 사용하여 이미지를 업로드할 수 있습니다.
-
이미지 예약: 이미지의 정렬(왼쪽, 오른쪽, 위쪽 또는 아래쪽)을 정의하거나 밀리미터(예: 20mm)와 같은 단위를 사용하여 사용자 지정 위치 를 지정하십시오.
2.2. 위치
레이아웃에서 이미지의 공간 배치를 제어합니다.
-
X 및 Y 좌표
-
높이 및 너비(mm)
2.3. 이익
텍스트 상자 주위의 간격을 정의합니다.
-
상단(위)
-
아래쪽(아래쪽)
-
왼쪽
-
오른쪽
2.4. 모양
모양: 이미지 필드의 시각적 스타일을 정의하고 테두리, 평면 또는 높임과 같은 사전 설정을 선택한 다음 칠 색상, 획 폭 및 모퉁이 스타일(둥글거나 선명하게)로 사용자 지정합니다.
2.5. 유무
런타임 시 이미지 구성 요소의 가시성을 결정합니다.
-
보임
-
숨김(공간 유지)
2.6. 데이터 바인딩
이미지 필드를 데이터 소스에 연결하여 통신 내에서 동적 이미지 콘텐츠를 검색하고 표시합니다.
데이터 바인딩 형식: 이미지 필드가 기본 데이터 구조 또는 스키마에 연결되는 방법을 정의합니다.
이름 사용: 데이터 모델 또는 스키마에 지정된 필드 이름을 사용하여 이미지 필드를 바인딩하여 런타임 시 이미지를 동적으로 채울 수 있습니다.
글로벌 데이터 사용: 이미지 필드를 전체 통신에서 공유되는 글로벌 데이터에 연결하여 시각적 콘텐츠의 일관성을 보장합니다.
데이터 바인딩 없음: 필드의 연결을 백엔드 데이터에서 끊도록 유지합니다. 이는 정적 이미지가 표시되는 경우 또는 이미지가 순전히 UI 설정을 통해 제어되는 경우에 이상적입니다.
3. 사용
이미지 필드는 시각적 컨텐츠 제출이 필요한 컨텍스트에서 유용합니다. 일반적인 사용 사례는 다음과 같습니다.
-
ID 증명(여권, 라이선스) 업로드 중
-
프로필 또는 개인 사진 제출
-
지원 문서를 시각적으로 첨부
작성자는 정렬을 위해 하위 양식 또는 레이아웃 컨테이너 내에 필드를 배치하고 사용자 정의 유효성 검사 규칙을 사용하여 허용되는 파일 형식 및 크기를 제어할 수 있습니다.
4. 우수 사례
-
이미지 업로드를 요청할 때 레이블이나 지침을 지우십시오.
-
성능 검증을 통해 파일 크기 및 형식을 제한합니다.
-
접근성을 위해 대체(예약) 이미지를 확인하십시오.
-
백 엔드와 통합되는 경우 필드를 의미 있는 스키마 경로에 바인딩
대화형 통신 편집기의 이미지 필드 구성 요소는 시각적 콘텐츠 업로드를 가능하게 하여 양식 상호 작용을 향상시키는 다목적 구성 요소입니다. 스타일 지정, 유효성 검사 및 데이터 바인딩으로 디자인된 경우 이미지 기반 제출을 위한 원활한 사용자 경험과 효율적인 데이터 캡처를 지원합니다.