Exibição de imagens

Você pode exibir imagens em seus formulários:

• Arquivos de imagem locais
• Imagens on-line
• Imagens codificadas em Base64.

Tutoriais

Ficheiro de Imagem Dinâmica

Para renderizar uma imagem dinamicamente:

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

   Você pode definir a tag HTML completa contendo a imagem como uma variável. Nesse caso, vincule os dados usando apenas {{data.img}} no campo Conteúdo .

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

Imagem Codificada Base64

Para carregar uma imagem convertida para o formato Base64:

1. Armazene a string Base64 em uma variável. Por exemplo, img.
2. In the Content field of the HTML Element component, enter the following snippet:

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

   Observação:

   This method allows you to change the image dynamically.

Arquivo de imagem local

Para fazer upload de arquivos de imagem locais em seus formulários:

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

Arquivo de imagem local usando o componente de elemento HTML

Para exibir um arquivo de imagem local usando o componente de Elemento HTML :

1. Arraste e solte um componente do Elemento HTML em seu formulário.
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.

Por exemplo, para exibir o arquivo de imagem localizado em C:\Folder\image.jpg, digite o seguinte snippet:

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