Image

Image(이미지) 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.

컨트롤 설명

Image 컨트롤을 통해 다양한 이미지를 쉽게 표시하고 관리할 수 있습니다.

이미지 컨트롤 사용 예시

디자인(Design) 모드

이미지 컨트롤 Design 속성 캡쳐

디자인 속성

이미지 여러개 보여주기

한 프레임 안에 이미지를 여러개 보여줄 때 선택합니다.

내 PC에서 업로드

컴퓨터에서 직접 이미지 파일을 업로드하거나 Freepik에서 제공하는 다양한 이미지를 활용합니다.

버튼을 누르면 내 PC에 있는 이미지를 업로드 할 수 있습니다.

버튼을 누르면 Freepik에서 제공하는 이미지를 업로드 할 수 있습니다.

Freepik 이미지 검색 팝업

이미지 보이기 설정

이미지 노출 시 채우기, 맞추기, 자르기 중 하나를 선택합니다.

공통 디자인 속성

컨트롤 명

너비 높이

배경

보더

마진

패딩

절대값 위치 설정

투명도 설정

개발(Dev) 모드

이미지 컨트롤 Dev 속성 캡쳐

이미지 컨트롤 유형 선택

이미지 컨트롤이 갖는 고유 속성들에 대한 자세한 설명을 다룹니다. 이미지 컨트롤 유형별 속성창이 달라 뷰 모드, 편집 모드로 나누어 설명합니다.

뷰 모드

사용자에게 이미지를 보여주는 용도입니다. 이미지 업로드 등 편집 기능을 제공하지 않습니다.

이미지 컨트롤 뷰 모드 속성 캡쳐

속성명	설명
새 창으로 이미지 보기	이미지 컨트롤 선택시 전체 화면으로 이미지를 확인할 수 있습니다. 핀치 제스처를 통해 부분 확대가 가능합니다.
이미지 여러개 보여주기	이미지를 여러개 보여줄 수 있습니다. 속성 활성화시 [이미지 보여줄 방법 정하기] 하위 속성이 다중 값을 입력받을 수 있도록 변경됩니다.
이미지 보여줄 방법 정하기	이미지 컨트롤과 원하는 이미지를 지정하는 방식을 정하고 하위속성을 통해 연결할 수 있습니다.

이미지 보여줄 방법 설명

방법	설명
내 PC에서 업로드	컴퓨터에서 직접 이미지 파일을 업로드하거나 Freepik에서 제공하는 다양한 이미지를 활용합니다.
URL	사용할 이미지가 있는 외부 URL을 입력합니다.
FlexFile	플렉스튜디오에서 제공하는 파일 시스템을 활용합니다. FlexFile 사용시 파일 별로 발급되는 FileKey가 저장된 콜렉션키를 입력하고 공유범위를 지정합니다.

이미지 여러개 보여주기 활성화

방법	설명
내 PC에서 업로드	아래 이미지 추가 버튼을 클릭하여 여러 이미지를 업로드할 수 있습니다. 단, Freepik 사용은 불가능 합니다.
URL	데이터소스를 사용하여 여러 이미지 URL을 보여줄 수 있습니다. 콜렉션 키 프로퍼티에 원하는 URL이 정의된 키 값을 입력합니다.
FlexFile	데이터소스를 사용하여 여러 FlexFile을 이미지 컨트롤로 보여줄 수 있습니다. 콜렉션 키 프로퍼티에 FileKey가 정의된 키 값을 입력합니다.

편집 모드

플렉스튜디오에서 제공하는 파일 시스템인 FlexFile을 활용하여 이미지 파일을 업로드할 수 있습니다. FlexFile을 사용하여 파일을 업로드하는 경우 발급받은 FileKey를 통해 뷰 모드에서 이미지를 보여줄 수 있습니다.

다중 업로드 기능은 제공하지 않습니다. 하나의 이미지 파일만 업로드 및 변경이 가능합니다.

이미지 컨트롤 편집 모드 속성 캡쳐

속성명	설명
기본 이미지 설정하기	사용자가 업로드한 이미지가 없는 경우 기본으로 보여줄 이미지를 지정합니다. 뷰모드 설정과 동일합니다. 단, 이미지 여러개 보여주기 기능은 제공되지 않습니다. 이미지 보여줄 방법 설명
FileKey를 저장할 콜렉션키	발급받은 FileKey를 저장할 콜렉션키를 입력합니다.
FileName을 저장할 콜렉션키	FileName을 저장할 콜렉션키를 입력합니다.
공유 범위 설정	파일 공유범위를 지정합니다.
폴더 명	업로드한 파일을 저장할 폴더명을 입력합니다. 별도로 입력하지 않은 경우 images 폴더에 저장됩니다.

공통 개발 속성

컨트롤 상태

권한키

로드스크립트

참고

FlexFile에 대한 자세한 내용은 FileUpload 컨트롤 페이지를 참고하세요