显示图像

您可以以表单形式显示图像：本地图像文件在线图像 Base64 编码图像。

您可以在表单中显示图像：

• 本地图像文件
• 在线图片
• Base64 编码图像。

教程

动态图像文件

要动态渲染图像，请执行以下操作：

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}} />.

   您可以将包含图像的完整 HTML 标签设置为变量。在本例中，请在“内容”字段中仅使用{{data.img}}绑定数据。

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

Base64 编码图像

要上传转换为 Base64 格式的图像，请执行以下操作：

1. 将 Base64 字符串存储到变量中。 例如img 。
2. In the Content field of the HTML Element component, enter the following snippet:

   <img href="data:image/png;base64,{{data.img}}"  />
   

   备注：

   This method allows you to change the image dynamically.

本地映像文件

要在表单中上传本地图像文件，请执行以下操作：

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

使用HTML 元素组件的本地图像文件

要使用HTML 元素组件显示本地图像文件，请执行以下操作：

1. 将“HTML 元素”组件拖放到表单中。
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.

例如，要显示位于 C:\Folder\image.jpg的图像文件，请输入以下代码段：

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