Image

These elements can be added to your interface using the UI Designer tool, and they are often used to convey information, enhance the aesthetic appeal of an interface, provide visual cues and feedback, support branding and marketing efforts, or present complex data or concepts in a more intuitive and accessible way.

​

Configuring an image

Configuring an image in the UI Designer involves specifying various settings and properties. Here are the key aspects of configuring an image:

​

Image settings

The image settings consist of the following properties:

• Source location - the location from where the image is loaded:
  • Media Library
  • Process Data
  • External

Depending on which Source location is selected, different configurations are available:

​

Media library

• Image key - the key of the image from the media library
• Select from media library - search for an item by key and select it from the media library

• Upload to media library - add a new item (upload an image on the spot)
  • upload item - supported formats: PNG, JPG, GIF, SVG, WebP; ❗️(maximum size - 50 MB by default)
  • key - the key must be unique and cannot be changed afterwards

​

Process data

• Identify the Source Type. It can be either a URL or a Base 64 string.
• Locate the data using the Process Data Key.
• If using a URL, provide a Placeholder URL for public access. This is the URL where the image placeholder is available.

​

External

• Source Type: it can be either a URL or a Base 64 string
• Image source: the valid URL of the image.
• Placeholder URL: the public URL where the image placeholder is available

​

Event handlers

The event handlers property allows you to add an event handler, which must be configured on the same node. For more information, see the Event Handlers documentation.

​

Image styling

The image styling property allows you to add or to specify valid CSS properties for the image. For more information, see the styling documentation.

​

Color

SaaS · The image component has a Color property that applies a color to the image, useful for tinting single-color icons and SVGs so they match a theme without editing the source asset. Set it in the component’s configuration; the color is applied by the web and Android renderers.