Image
The Image element embeds a visual asset directly within a form. It can display any image from a web URL, a base64-encoded data string, or a fileโฆ
The Image element embeds a visual asset directly within a form. It can display any image from a web URL, a base64-encoded data string, or a file reference โ making it suitable for static branding assets, dynamic previews of uploaded content, process-generated visual outputs, or any scenario where a picture communicates what text cannot.
The element is fully configurable: you can set the display size (width, height), control the aspect ratio, add accessibility alt text, and even make the image a clickable link (linkurl / linkurltarget). Since src is part of the data model in Procesio Forms, the image source can be swapped at runtime โ for example, showing a user's profile picture loaded from a process, or rendering a dynamic chart image returned by an API.
Key Use Cases
โขย ย ย ย ย ย ย Displaying a company logo or branding at the top of a form
โขย ย ย ย ย ย ย Showing a preview of a file uploaded in the same form (src set from value of File Upload)
โขย ย ย ย ย ย ย Rendering a dynamic chart, map, or QR code returned by a process action
โขย ย ย ย ย ย ย Making an image a clickable link to a related document or external resource
โขย ย ย ย ย ย ย Displaying a product image when a user selects a product in a dropdown
Runtime API โ Attributes in Procesio Forms
All attributes below are accessible and modifiable at runtime via the element's data model in Procesio Forms.
| API Name | Description | Type | Default | Notes |
|---|---|---|---|---|
| label | Optional label text displayed with the image | string | โ | โ |
| tooltip | Help text shown alongside the image | string | โ | โ |
| visible | Controls element visibility | boolean | true | โ |
| src | Image source โ URL, base64 string, or file reference | string|file | โ | Updatable at runtime |
| alt | Accessible alternative text for the image | string | โ | โ |
| title | Title text shown on hover | string | โ | โ |
| width | Display width of the image | string | auto | px, %, etc. |
| height | Display height of the image | string | auto | px, %, etc. |
| aspectratio | Controls the image's aspect ratio | string | auto | e.g. auto, 16/9 |
| linkurl | Makes the image a clickable link | string | โ | โ |
| linkurltarget | Where the link opens | string | โ | self, blank, parent, top |
| name | Unique element name | string | โ | โ |
| id | Unique element ID | string | โ | โ |
For support, please join our Discord community for further assistance and support.
Paragraph
The Paragraph element renders a block of body text within a form. Like the Heading, it is a pure display element โ it shows text to the user butโฆ
File Viewer
The File Viewer element provides an inline or modal document preview experience directly within a form. Rather than forcing users to download a fileโฆ