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.
By Table row selection
Dynamically populate an image based on another component, like the URL contained in the selected row of a Table:
By Dropdown selection
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:
Add a Trigger on image click
Run any API or open a Slideout panel when the image is clicked.
|Image||Set the URL or base 64 string of the image and it will automatically render|
|Border radius||Add rounded corners to an image|
|Fill the container||Set the size of the image to cover the available space or keep contained|
|Align||Set the alignment of the image - left, center, or right|
|Loading Animation||Whether iFrame should show loading animation when a dependent API is running, values are a boolean|
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
|Returns the Image property as a string|
|Returns 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.
|onClick||Run an API every time the Radio Button is clicked|