Skip to main content


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:

"url": ""

Using Base64

The Image control supports Base64 strings. You can directly include the image data in Base64 format using the syntax data:image/<type>;base64, where <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 ImageAllows you to pick an image from the Gallery or upload it from a source location.
Image cachingEnables image caching to improve loading speed by storing the image in cache for future use.
MagnifyToggles the magnify feature, adding an eye icon to the image control for zooming in and out.
Image URLSpecifies the URL of the image to be displayed in the control.


PaddingSpecifies the space between the image and the border as a number of pixels to the top, bottom, left, and right.
MarginSpecifies the space outside the padding as a number of pixels to the top, bottom, left, and right.
WidthSpecifies the width of the margin.
StyleSpecifies the style of the margin, such as none, solid, dashed, or dotted.
ColorSpecifies the color of the margins.
RadiusProvides rounded corners to the image. You can specify the value for top-left, top-right, bottom-left, and bottom-right corners accordingly.


Image WidthSets the width of the image in the container, either in pixels or as a percentage.
Image Max WidthSets 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.
AlignmentAllows you to choose the alignment of the image as left, right, or center.
Fill TypeDefines how the image appears on the screen: Cover (scaled up) or Contain (scaled down).
Container HeightAllows you to set the height of the image container. If no value is entered, it adjusts to the image.
Container WidthSets the width of the image container.

Control Outputs

The outputs from the Image control, represented by the placeholder {{image.[property_name]}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.