Image
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
By URL
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
Similarly, use more complex JavaScript expressions to set the image URL. For example, display the image based on the value selected in a Dropdown:
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 Properties
Component Properties
| Property | Description |
|---|---|
| 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 |
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:
| Property | Description |
|---|---|
Image1.image | Returns the Image property as a string |
Image1.isVisible | Returns the boolean value of the component's visibility (True, if it is visible) |
Events
The following events are triggered by user interactions with Image components. Use event handlers to trigger actions in response to user events.
| Property | Description |
|---|---|
| onClick | Run an API every time the Radio Button is clicked |