Displaying Images

You can display images in your forms:

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

Tutorials

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 href={{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.

4. Under the Content field, check Refresh On Change.

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 href="data:image/png;base64,{{data.img}}"  />

   Note: This method allows you to change the image dynamically.

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 href="/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 href="/file://c:\folder\image.jpg" />