Image

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.

Properties

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.

NameTypeDescriptionaltTextstring

An accessible image description for screen readers.

aspectRationumber | null

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

clickableboolean

Whether the component has an enabled Click event handler.

dbBlobIdstring

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.

flipHorizontalboolean

Whether the image is flipped horizontally.

flipVerticalboolean

Whether the image is flipped vertically.

heightType'auto' | 'fixed'

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

hiddenboolean

Whether the component is visible.

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

The horizontal alignment of the image when fit is contain

maintainSpaceWhenHiddenboolean

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

marginstring

The amount of margin to render outside of the component.

retoolFileObjectobject

A file representation that is shared by components on Retool.

retoolStorageDynamicInputboolean

Whether the input for retoolStorageFileId is dynamic.

retoolStorageFileIdstring

The id of the uploaded image when srcType is retoolStorageFileId.

retoolStorageShowLegacyFilesboolean

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

showInEditorboolean

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

srcstring

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.

storageBlobIdstring

The ID of the uploaded image when srcType is storageBlobId.

tooltipTextstring

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

Events

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

NameDescriptionClick

A user clicks the component.

Methods

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