> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Image UI elements are graphical components of a user interface that display a static or dynamic visual representation of an object, concept, or content.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_general.png)

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.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_generic.png)

## 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** - where the image is loaded from:

  * [**Media Library**](#media-library)
  * **Document Plugin path** (process user tasks): a Documents plugin `downloadPath`, such as the one in an upload reply. The renderer adds the Documents plugin base URL, so no business rule is needed.
  * **Document Plugin** (UI Flows): an object that contains `downloadPath`, such as an upload reply.
  * **URL**: a complete, absolute URL, used as-is. The renderer attaches the user's access token only when the URL ends in `download`.
  * **Base64**: a Base64-encoded image string.
* **Value type** - for **Document Plugin path**, **URL**, and **Base64**: [**Static**](#static-value) for a fixed value, or [**Variable**](#variable-value) to read it from a data key. **Document Plugin** always reads a data key.
* **Placeholder URL** - for every source except **Media Library**, the public URL where the image placeholder is available.

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

### Media library

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_media_library1.png)

* **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

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/search_item_by_key.png)

* **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

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/upload_to_media_lib.png)

### Variable value

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/process_data.gif)

* Set **Value type** to **Variable** and enter the **Data key** that holds the value.
* With **URL**, the value at that key is used as-is, so it must be a complete, absolute URL. With **Base64**, the key holds the encoded image.
* To show a file uploaded through the Documents plugin, set **Source** to **Document Plugin path** in a process user task and point the key at the upload reply's `downloadPath`. In a UI Flow, use **Document Plugin** and point the key at an object that contains `downloadPath`, such as an upload reply. In both cases the renderer builds the URL. See [Preview an uploaded file](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/file-preview.md#preview-an-uploaded-file) for the upload reply.
* Provide a **Placeholder URL** for public access. This is the URL where the image placeholder is available.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/process_data_img.png)

### Static value

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_external.png)

* **Source**: **URL** or **Base64**, with **Value type** set to **Static**
* **Value**: the valid URL of the image, or the Base64 string.
* **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](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/event-handlers.md).

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_ui_actions.png#center)

## 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](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#styles-tab).

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/building-blocks/ui-designer/image_styling.png)

## Color

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.


## Related topics

- [Microservices setup guides](https://docs.flowx.ai/6.x/setup-guides/setup-guides-overview.md)
- [Deployment guidelines v5.9.4](https://docs.flowx.ai/release-notes/v5.x/v5.9.4-august-2026/deployment-guidelines-v5.9.4.md)
- [AI node types](https://docs.flowx.ai/6.x/ai-platform/agent-builder/node-types.md)
- [FlowX.AI 5.9.4 Release Notes (LTS)](https://docs.flowx.ai/release-notes/v5.x/v5.9.4-august-2026/v5.9.4-august-2026.md)
- [Document Converter setup](https://docs.flowx.ai/6.x/setup-guides/document-converter-setup.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.