> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/image.md).

# Image

![](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FjaWeON0p1PXeJ7Zu0Snd%2Fimage.png?alt=media\&token=ded5c1c0-02d7-40c5-a9c8-b1afa08d3e57)

## Overview

The **Image module** allows you to to display an image in a site. This module currently supports using image url, which can be obtained uploading an image in your [**Asset Manager**](/guides/asset-management.md) or an external image hosting site.

## Properties <a href="#properties" id="properties"></a>

**URL** (required)\
*String, url*\
Url of the asset image. This property accepts the url of an image.

[**Alt Text**](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)\
*String*\
Sets an [Accessibility reader](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) text description of the image.

[**Min Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)\
*String*\
Defines the minimum width of the image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Max Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)\
*String*\
Defines the maximum width of the image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Min Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)\
*String*\
Defines the minimum height of the image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Max Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)\
*String*\
Defines the maximum height of the image. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Object Fit**](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)\
*Dropdown*\
Image setting for container resize behavior. The following options can be used:

* `contain`
* `cover`
* `fill`
* `none`
* `scale-down`

## Nodes <a href="#nodes" id="nodes"></a>

### Broadcasters

**Image:on-load**\
Broadcast event when the image is loaded

**Image:on-click**\
Broadcast event on click

### Listeners

**Image:change**\
Listener event when an image changes

***Parameters***

**src** - The updated image source.

**Image:click**\
Event listener when an image is clocked

***Parameters***

**none**

**Image:animationState**\
Animation state event listener

***Parameters***

**stateName** - The animation state class name