Skip to main content

Image

You can add images in the form of URLs or base64 strings. The Image widget supports popular formats such as JPG, PNG, SVG, WebP and GIF.

How to use the Image Widget

Display static images

You can specify the image source using the Image property to display an image. The Image property can accept a URL, a data URI, or a base64 encoded image data as its input. For example, you can add this URL in the image property:

https://jpeg.org/images/jpegsystems-home.jpg

You can also set an image in the Default Image property to be displayed if the image source fails to load or is invalid.

Inline SVG

To display inline SVG, paste your SVG content in the Image property and escape the special characters with the UTF-8 equivalents.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /%3E%3C/svg%3E

Display images dynamically

This allows you to display images that change based on user input or other components, such as a widget or query. For example, suppose you have a Table displaying a list of users with their respective image URLs stored in a column.

Bind {{Table1.selectedRow.image}} in the Image property where "Table1" is the name of your table widget and "image" is the name of the column containing the image URL.

Display images on table row selection
Display images on table row selection

Display images from S3 bucket

To fetch an image from S3, follow these steps:

  • Click the + icon next to Queries/JS and choose your S3 datasource.
  • Select the "List files" method from the Commands drop-down menu.
  • Provide the required parameters for reading the file, including the bucket name, file path and file data type.

Once you have added all the required parameters in the Image property pane, add:

{{list_files.data[0].signedUrl}}

Download images

You can toggle the Enable Download property in the Image widget's property pane. Once enabled, a download icon appears on the image.

Download image
Download image

Alternatively, you can use the built-in Download function and set it to run on the onClick event of the Image widget:

{{download(Image1.image,'my-image-name','image/png')}}

Properties

Properties allow you to customize the widget, connect it to other widgets and trigger events on user actions.

Widget properties

PropertyDescription
ImageSets the source from which to render the image. Accepts an image URL, data URI, or base64 encoded image data.
Default ImageSets a default image that would be displayed if no image is rendered via the Image property. Accepts an image URL, data URI, or base64 encoded image data.
Object FitSets how the image should be resized to fit its container. With JS enabled, accepts string values auto, cover, or contain. See CSS object-fit docs for reference on these behaviors.
Max Zoom LevelSets the maximum allowable zoom level for the image view. With JS enabled, accepts number values.
VisibleControls widget's visibility on the page. When turned off, the widget won't be visible when the app is published.
Animate LoadingControls the widget’s animation on page load.
Enable RotationToggles a control on the widget that allows the user to rotate the image.
Enable DownloadToggles a control on the widget that allows the user to download the image.

Reference properties

These properties can be referenced in other widgets, queries, or JS functions using the dot operator.

PropertyDescription
imageContains the URL of the image source (string).
isVisibleReflects the state of the widget's Visible setting

Style properties

Style properties allow you to change the look and feel of the widget.

PropertyDescription
Border RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowCasts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.

Events

These are functions that are called when event listeners are triggered in the widget. Use actions to execute tasks based on user events.

EventDescription
onClickSets an action when the user clicks this widget.

Further reading