Skip to main content

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 drop 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" />