Image
Image(이미지) 위젯은 PNG·JPG 같은 래스터 이미지를 화면에 표시하는 위젯입니다.
asset(프로젝트 자원)·네트워크(URL)·파일 등 다양한 소스의 이미지를 불러와 크기·맞춤·정렬을 지정해 그려줍니다.
정의 / 역할
Image 위젯은 지정한 이미지 소스를 읽어 화면에 그려줍니다. 이미지가 없거나 로드에 실패하면 대체 이미지(placeholder)를 대신 표시합니다. 크기(width·height), 채움 방식(fit), 정렬, 반복, 색 필터 등을 설정할 수 있습니다.
- 카테고리: Contents
- 지원 이미지 소스(
image속성에서 선택):assetImage(프로젝트 에셋, 화면 배율에 맞는 해상도 변형 자동 선택),exactAssetImage(프로젝트 에셋을 지정 경로·배율 그대로 로드),networkImage(URL 원격 이미지),fileImage(기기 파일 경로). 기본값assetImage - 기본 이미지 소스: 빈 asset (지정 필요)
기능
| 기능 | 설명 |
|---|---|
| 이미지 표시 | asset·네트워크(URL)·파일 이미지를 화면에 그립니다. |
| 대체 이미지 | 이미지가 없거나 로드 실패 시 placeholder에 지정한 대체 이미지를 표시합니다. |
| 크기·맞춤 | 너비·높이와 fit(채움 방식)을 지정해 이미지 표시 영역을 조정합니다. |
| 색 필터 | color·colorBlendMode로 이미지에 색을 덧입힙니다. |
| 반복·정렬 | repeat로 이미지를 타일처럼 반복하고 alignment로 정렬합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- Image 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서
image값에 표시할 이미지 소스(asset·URL·파일)를 지정합니다. - 필요하면
width·height·fit으로 크기와 채움 방식을 조정합니다. - 로드 실패에 대비해
placeholder에 대체 이미지를 지정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
image | 표시할 이미지 소스. 소스 종류를 assetImage·exactAssetImage·networkImage·fileImage 중에서 고르고, 가져올 소스를 지정합니다. | 빈 asset (지정 필요) | 이미지 소스 |
placeholder | 이미지가 없거나 로드 실패 시 표시할 대체 이미지 asset 이름 | 미지정 | 문자열(asset 이름) |
Size | 이미지 크기 - 너비(width)·높이(height)를 함께 지정하는 묶음 속성 | 미지정 | 크기(너비·높이, 숫자 px) |
color | 이미지에 덧입힐 색 | 미지정 | 색상 |
colorBlendMode | color를 이미지와 합성하는 방식 | 미지정 | 합성 모드 |
fit | 표시 영역에 이미지를 채우는 방식 | 미지정 | fill, contain, cover, fitWidth, fitHeight, none, scaleDown |
alignment | 표시 영역 안 이미지 정렬 | 가운데 | 정렬 값 |
repeat | 이미지 반복 방식 | noRepeat(반복 안 함) | repeat, repeatX, repeatY, noRepeat |
centerSlice | 9-슬라이스로 늘릴 중앙 영역 | 미지정 | 사각 영역 |
matchTextDirection | 텍스트 방향에 맞춰 이미지 뒤집기 | false | 참/거짓 |
gaplessPlayback | 이미지 교체 시 이전 이미지를 유지해 깜빡임 방지 | false | 참/거짓 |
isAntiAlias | 안티에일리어싱(가장자리 부드럽게) 적용 - 현재 버전에서는 동작하지 않습니다. | false | 참/거짓 |
filterQuality | 이미지 스케일링 품질 | low | none, low, medium, high |
semanticLabel | 접근성 스크린 리더용 설명 | 미지정 | 문자열 |
excludeFromSemantics | 접근성 정보에서 제외 | false | 참/거짓 |
주의 / 팁
경고
image를 지정하지 않거나 소스를 찾을 수 없으면 이미지가 표시되지 않습니다. 이 경우 placeholder에 지정한 대체 이미지가 대신 표시됩니다.
팁
네트워크(URL) 이미지는 로딩 중·실패 시 자동으로 placeholder 이미지를 보여줍니다. asset 이미지는 프로젝트에 등록된 자원 이름을 사용합니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Image (이미지) Widget Control 문서에서 확인하세요.