# Image

Learn how to use the Image report item in ActiveReportsJS.

## Content

An `Image` report item displays static or dynamic images in a report. Static images can be [embedded](/activereportsjs/docs/ReportAuthorGuide/report-configuration/layout-properties#embedded-images) into a report template. Dynamic images come from an external source, such as an URL or a data set field containing image data in `Base64` format.

### Adding an Image

You can add an `Image` into a report by either double-click the corresponding item in the [toolbox](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox) or drag-and-drop it to a report page area or other container, such as a [Table](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) cell.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch adding an Image into a table cell in action
DOC-SUMMARY-TAG-CLOSE
![AddingImageInCell](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingImageInCell.666b6a.gif)
DOC-DETAILS-TAG-CLOSE

### General Image Configuration

The general configuration includes [Base Report Item properties](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [Common Style Properties](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), and [Visibility](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility)

### Image Appearance

The drop-down editor of the `Image` property in the `Appearance` section provides a quick way to choose the image source.

* The `Shared` tab enumerates image files that reside in the same folder as the report template
* The `Embedded` tab contains the list of [embedded images](/activereportsjs/docs/ReportAuthorGuide/report-configuration/layout-properties#embedded-images)
* The `Database` tab shows the fields from the [report datasets](/activereportsjs/docs/ReportAuthorGuide/Databinding)

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Expand to watch using the Image drop-down editor in action
DOC-SUMMARY-TAG-CLOSE
![](https://cdn.mescius.io/document-site-files/images/842dd3d8-a1be-45db-beee-203d3fbaf37e/setting-image-quick.f84f66.gif)
DOC-DETAILS-TAG-CLOSE

Selecting any of the items on these tabs automatically sets the following properties that can also be configured manually if you click the `expand` icon on the right side of the `Image` property.

* The `Source` specifies where the image come from
    * `External` \- URL or a file on the local file system\. For instance\, the [Get Started with Banded Reports](/activereportsjs/docs/ReportAuthorGuide/QuickStart/get-started-with-/Get-Started-With-Banded-Reports) walkthrough uses the option to display employee photos.
    * `Embedded` - [embedded report images](/activereportsjs/docs/ReportAuthorGuide/report-configuration/layout-properties#embedded-images). ActiveReportsJS demo reports, such as the [Simple Table](/activereportsjs/demos/Reports/SimpleTable/purejs) use this option to show the company name logo in the page header.
    * `Database` \- a data set field that contains the image data in `Base64` format
* The `Value` [expression](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression) is an image Id, for instance the `URL`. In addition, you could set an image to one of the [Data Visualizers](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#data-visualizers).
* The `MIME Type` [expression](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression) specifies the image type. Supported types are `jpeg`, `png` and `svg`

In addition, you can specify how an image should be arranged within a bounding box:

* The `Image Sizing` determines the relation between the report item size and one of the image:
    \* `Clip` \- if the image size is larger than the report item size\, then the image is cut off
    \* `Fit` \- the image size is expanded or contracted to fit into the report item's bounding box
    \* `FitProportional` \- the image size is expanded or contracted to fit into the report item's bounding box\, preserving the width to height ratio
    \* `AutoSize` \- the report item size is automatically set to the image size
* The `Horizontal Alignment` and `Vertical Alignment` are applicable for the `Clip` and `FitProportional` sizing modes:
    \* If the image is clipped, then these properties determine which portion of the original image displays within the report item's bounding box.
    \* If the image is fit with preserving the width to height ratio, then these properties determine the image's alignment within the report items' bounding box.