Mostrar imágenes

Puede mostrar imágenes en sus formularios:

• Archivos de imágenes locales
• Imágenes en línea
• Imágenes codificadas en Base64.

Tutoriales

Archivo de imagen dinámico

Para representar una imagen dinámicamente:

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

   Puedes establecer la etiqueta HTML completa que contiene la imagen como una variable. En este caso, vincula los datos utilizando solo {{data.img}} en el campo Contenido .

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

Imagen codificada en Base64

Para cargar una imagen convertida al formato Base64:

1. Almacena la cadena Base64 en una variable. Por ejemplo, img.
2. In the Content field of the HTML Element component, enter the following snippet:

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

   Nota:

   This method allows you to change the image dynamically.

Archivo de imagen local

Para cargar archivos de imágenes locales en sus formularios:

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

Archivo de imagen local utilizando el componente de elemento HTML

Para mostrar un archivo de imagen local utilizando el componente Elemento HTML :

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.

Por ejemplo, para mostrar el archivo de imagen ubicado en C:\Folder\image.jpg, introduzca el siguiente fragmento:

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