An image sourced from a URL or uploaded file. It supports alt text, cropping and size adjustments, and accepts URLs or Base64-encoded images in all browser-supported formats. Users on Business or Enterprise plans can upload images directly to Retool.


Available properties for Image with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.


An accessible image description for screen readers.

aspectRationumber | null

The aspect ratio with which to display the image if heightType is auto.


Whether the component has an enabled Click event handler.


Self-hosted Retool deployments only. The ID of the uploaded image when srcType is dbBlobId.

fit'cover' | 'contain'

Whether the image is cropped to fit (cover) or scaled to fill (contain) the width of the component if heightType is fixed.


Whether the image is flipped horizontally.


Whether the image is flipped vertically.

heightType'auto' | 'fixed'

Whether the height automatically resizes to fit content or is a fixed size.


Whether the component is visible.

horizontalAlign'left' | 'center' | 'right'

The horizontal alignment of the image when fit is contain


Whether the component takes up space on the canvas if hidden is true.


The amount of margin to render outside of the component.


A file representation that is shared by components on Retool.


Whether the input for retoolStorageFileId is dynamic.


The id of the uploaded image when srcType is retoolStorageFileId.


Toggles the dropdown between Retool Storage files and legacy uploaded files.


Whether the component remains visible in the editor if hidden is true.


The source URL.

srcHeightnumber | null

The height of the source image.

srcType'src' | 'dbBlobId' | 'storageBlobId' | 'retoolStorageFileId' | 'retoolFileObject'

The type of the image source. Either src, dbBlobId, or storageBlobId.

srcWidthnumber | null

The width of the source image.


The ID of the uploaded image when srcType is storageBlobId.


The text to display in a tooltip on hover or focus.


Events are triggered by user interactions with Image. Use event handling to trigger queries or other actions in response to events.


A user clicks the component.


Methods for interacting with Image. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

setFlipVertical(flipVertical: boolean)

Set the flipVertical value to toggle whether the image is vertically flipped. Defaults to false without a parameter

setFlipHorizontal(flipHorizontal: boolean)

Set the flipHorizontal value to toggle whether the image is horizontally flipped. Defaults to false without a parameter.

setImageUrl(imageUrl: string)

Set the src value to specify the image URL to use.

Related components