Skip to main content


Display images from any URL hosted in S3, Google or anywhere on the web

Superblocks can automatically render images from a URL. Image URLs can be hardcoded or dynamically generated by binding to other components.

Display an image


Start by dragging the Image component from the Components panel to the empty canvas. Enter the URL of your image to replace the default.

Drag an image component on to the canvas and update the Image property

By Table row selection

Dynamically populate an image based on another component, like the URL contained in the selected row of a Table: Dynamically populate an image based on the state of another component

Dynamically populate an image based on the state of a table component

By Dropdown selection

Similarly, use more complex JavaScript expressions to set the image URL. For example, display the image based on the value selected in a Dropdown:

Use JavaScript to dynamically render an image based on the selection of a dropdown component

Dynamically render an image based on the selection of a dropdown component

Configure image size and position

Drag the corners of the image to adjust its size. You can also modify properties for Border radius, Fill the container, and Align to achieve desired look and position of the image:

Adjust the border radius, alignment, and fill of an image

Add a Trigger on image click

Run any API or open a Slideout panel when the image is clicked.

Trigger an event handler when an image is clicked

Image Properties

Component Properties

ImageSet the URL or base 64 string of the image and it will automatically render
Border radiusAdd rounded corners to an image
Fill the containerSet the size of the image to cover the available space or keep contained
AlignSet the alignment of the image - left, center, or right
Loading AnimationWhether iFrame should show loading animation when a dependent API is running, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Image, and dot referencing the property. For a Image named Image1:

Image1.imageReturns the Image property as a string
Image1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)


The following events are triggered by user interactions with Image components. Use event handlers to trigger actions in response to user events.

onClickRun an API every time the Radio Button is clicked