# 이미지

## Content

`이미지` 보고서 항목은 보고서에 정적 또는 동적 이미지를 표시합니다. 정적 이미지는 보고서 템플릿에 [포함](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties#embedded-images)할 수 있습니다. 동적 이미지는 외부 소스(예: URL 또는 `Base64` 형식의 이미지 데이터를 포함한 데이터 집합 필드)에서 가져옵니다.

### 이미지 추가

[도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)에서 해당 항목을 두 번 클릭하거나 보고서 페이지 영역 또는 다른 컨테이너(예: [표](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) 셀)로 끌어 놓아 보고서에 `이미지`를 추가할 수 있습니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 표 셀에 이미지 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/AddingImageInCell.gif)
DOC-DETAILS-TAG-CLOSE

### 일반 이미지 구성

일반 구성에는 [기본 보고서 항목 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [공통 스타일 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties) 및 [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility)가 있습니다.

### 이미지 모양

`모양` 섹션에 있는 `이미지` 속성의 드롭다운 편집기에서는 이미지 소스를 빠르게 선택할 수 있습니다.

* `공유` 탭은 보고서 템플릿과 동일한 폴더에 있는 이미지 파일을 열거합니다.
* `포함됨` 탭에는 [포함된 이미지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties#embedded-images) 목록이 포함되어 있습니다.
* `데이터베이스` 탭에는 [보고서 데이터베이스](/activereportsjs/docs/ReportAuthorGuide/Databinding)의 필드가 표시됩니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 이미지 드롭다운 편집기 사용 보기
DOC-SUMMARY-TAG-CLOSE
![setting-image-quick.f84f66](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8c2d4ff8-f06d-401b-929d-fc20f30cdb0d/setting-image-quick.f84f66.c43013.gif)
DOC-DETAILS-TAG-CLOSE
이러한 탭에서 항목을 선택하면 다음 속성이 자동으로 설정됩니다. 해당 속성은 `이미지` 속성의 오른쪽에 있는 `확장` 아이콘을 클릭하면 수동으로 구성할 수도 있습니다.

* `소스`는 이미지를 가져온 위치를 지정합니다.
    * `외부` \- 로컬 파일 시스템의 URL 또는 파일입니다\. 예를 들어\, [밴드 보고서 시작하기](/activereportsjs/docs/ReportAuthorGuide/QuickStart/인쇄가능-리포트/Get-Started-With-Banded-Reports) 연습에서는 이 옵션을 사용하여 직원 사진을 표시합니다.
    * `포함됨` - [포함된 보고서 이미지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties#embedded-images)입니다. [기본 표](/activereportsjs/demos/Reports/SimpleTable/purejs)와 같은 ActiveReportsJS 데모 보고서에서는 이 옵션을 사용하여 페이지 헤더에 회사 이름 로고를 표시합니다.
    * `데이터베이스` - `Base64` 형식의 이미지 데이터를 포함한 데이터 집합 필드입니다.
* `값` [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 이미지 ID입니다(예: `URL`).
* `MIME 유형` [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 이미지 형식을 지정합니다. 지원되는 형식은 `jpeg`, `png`, `svg`입니다.

또한 경계 상자 내에서 이미지 정렬 방식을 지정할 수 있습니다.

* `이미지 크기 조정`은 보고서 항목 크기와 이미지 하나 간의 관계를 결정합니다.
    * `클립` \- 이미지가 보고서 항목 크기보다 크면 이미지를 자릅니다\.
    * `맞춤` \- 이미지 크기가 보고서 항목의 경계 상자에 맞춰 확장 또는 축소됩니다\.
    * `비례하여 맞추기` \- 이미지가 보고서 항목의 경계 상자에 맞춰 너비:높이 비율을 유지한 상태로 확장 또는 축소됩니다\.
    * `크기 자동 조정` \- 보고서 항목의 크기가 이미지 크기에 맞춰 자동으로 설정됩니다\.
* `가로 맞춤` 및 `세로 맞춤`은 `잘라내기` 및 `비례하여 맞추기` 크기 조정 모드에 다음과 같이 적용할 수 있습니다.
    * 이미지를 잘라낸 경우 해당 속성에 따라 보고서 항목의 경계 상자 내에 표시되는 원본 이미지의 부분이 달라집니다.
    * 이미지가 너비:높이 비율을 유지한 상태로 맞춰진 경우 해당 속성에 따라 보고서 항목의 경계 상자 내에서 이미지 정렬이 달라집니다.