Subscribe

UiPath Activities

The UiPath Activities Guide

Displaying Images

Overview


You can display images in your forms:

  • Local image files
  • Online images
  • Base64 encoded images.

Tutorials


Local Image File

To upload local image files in your forms:

  1. Use the Content form component.
  2. Click Insert Image. This prompts you to browse for the image file you want to use.

Local Image File Using HTML Element Component

To display a local image file using the HTML Element component:

  1. Drag and drap a HTML Element component into your form.
  2. In the Content field of the Display tab, enter <img src="/file://path-to-file" />, where path-to-file is the local path to the file you want to display.

For example, to display the image file located at C:\Folder\image.jpg, enter the following snippet:

<img src="/file://c:\folder\image.jpg" />

Base64 Encoded Image

To upload an image converted to Base64 format:

  1. Store the Base64 string to a variable. For example, img.
  2. In the Content field of the HTML Element component, enter the following snippet:
<img src="data:image/png;base64,{{data.img}}"  />

📘

Note:

This method allows you to change the image dynamically.

 

Dynamic Image File

To render an image dynamically:

  1. Set the image file path as a variable in the FormFieldsCollection (Studio) and name it accordingly (for example, img).
  2. Navigate to the Display tab of the HTML Element component (Form Designer).
  3. In the Content field, add <img src={{data.img}} />.

You can set the full HTML tag containing the image as a variable. In this case, bind the data using only {{data.img}} in the Content field.

Updated 5 days ago


Displaying Images


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.