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.
An accessible image description for screen readers.
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
.
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.
Whether the height automatically resizes to fit content or is a fixed size.
Whether the component is visible.
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.
The height of the source image.
The type of the image source. Either src
, dbBlobId
, or storageBlobId
.
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
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
Methods for interacting with Image. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.
Scrolls the canvas or parent container so that the selected component appears in the visible area.
Set the hidden
value to toggle whether the component is visible. Defaults to true
without a parameter.
Set the flipVertical
value to toggle whether the image is vertically flipped. Defaults to false
without a parameter
Set the flipHorizontal
value to toggle whether the image is horizontally flipped. Defaults to false
without a parameter.
Set the src
value to specify the image URL to use.