The Image control serves the purpose of showcasing images within a microapp. As a Media control, it is solely dedicated to viewing and displaying images, devoid of any involvement in submission tasks.
Binding Data Options
The Image control offers different methods to bind data for displaying images. You can provide a URL to fetch images from various sources or use Base64 strings to directly include image data. Below are the two options:
Using a URL
You can provide a URL to the Image control, which can be sourced from a sheet, a connector row, or provided directly as a Static URL. Ensure the URLs are accessible and correctly formatted.
Example using Static URLs:
The Image control supports Base64 strings. You can directly include the image data in Base64 format using the syntax
<type> corresponds to the image file format (e.g., 'png', 'jpeg', 'gif', etc.).
Example using Base64:
Ensure the Base64 string corresponds to the correct image format specified.
By utilizing these options, you can effectively bind data to the Image control and display images from various sources in your microapp.
|Select Image||Allows you to pick an image from the Gallery or upload it from a source location.|
|Image caching||Enables image caching to improve loading speed by storing the image in cache for future use.|
|Magnify||Toggles the magnify feature, adding an eye icon to the image control for zooming in and out.|
|Image URL||Specifies the URL of the image to be displayed in the control.|
|Padding||Specifies the space between the image and the border as a number of pixels to the top, bottom, left, and right.|
|Margin||Specifies the space outside the padding as a number of pixels to the top, bottom, left, and right.|
|Width||Specifies the width of the margin.|
|Style||Specifies the style of the margin, such as none, solid, dashed, or dotted.|
|Color||Specifies the color of the margins.|
|Radius||Provides rounded corners to the image. You can specify the value for top-left, top-right, bottom-left, and bottom-right corners accordingly.|
|Image Width||Sets the width of the image in the container, either in pixels or as a percentage.|
|Image Max Width||Sets the maximum width of the image in the container, either in pixels or as a percentage.|
|Max Height (px)||Specifies the maximum height of the image in pixels.|
|Alignment||Allows you to choose the alignment of the image as left, right, or center.|
|Fill Type||Defines how the image appears on the screen: Cover (scaled up) or Contain (scaled down).|
|Container Height||Allows you to set the height of the image container. If no value is entered, it adjusts to the image.|
|Container Width||Sets the width of the image container.|
The outputs from the Image control, represented by the placeholder