🌄Image

Use the Image component to convey information in your apps in a vibrant manner. QuickDEV allows you to add an image via URL or base64-encoded data.

URL

Drag the Image component onto the canvas or into a Container. Upon clicking the Image component, the Properties tab appears on the right. Here, you can set the URL to display the desired image.

Base64 encoded data

You also have the option to insert an image via base64-encoded data. Ensure that the encoded image source begins with either data:image/PICTURE_FORMAT;base64, or simply data:image;base64,

Ensure that you include the comma at the end of the prefix in the following format:

• data:image/PICTURE_FORMAT;base64, BASE64_ENCODED_IMAGE

• data:image;base64, BASE64_ENCODED_IMAGE

Demo: upload and display an image

A typical scenario for displaying base64-encoded images involves integrating a File Upload component with an Image component.

Below is JavaScript code that concatenates the prefix with the encoded base64 data of the uploaded file accessed via file.value[0]

{{"data:image/jpeg;base64," + file.value[0]}}

Set click preview for an image

You can activate "Support click preview" in the Properties tab to enable users to preview the image in its full size. Hovering over the image reveals the preview icon (👁 Preview), which users can click to preview the image.

Set the style of an image

Within the Properties > Style section, you can adjust the border color and specify the border radius in pixels or by percentage.