Image
Last updated
Was this helpful?
Last updated
Was this helpful?
Use the Image component to present information in your apps in a vivic way. Lowcoder supports you adding an image via URL and base64 encoded data.
Drag the Image component onto the canvas or into a Container. Click the Image component, and the Properties tab is displayed on the right. You can set the URL to display an image.
You can also insert an image via base64 encoded data. Ensure that the encoded image source starts with data:image/PICTURE_FORMAT;base64, or simplydata:image;base64,.
Don't miss the comma at the end of the prefix:
data:image/PICTURE_FORMAT;base64,YOUR_BASE64_ENCODED_IMAGE_DATA
data:image;base64,YOUR_BASE64_ENCODED_IMAGE_DATA
One common use case for base64 image display would be combining a File Upload component with an Image component.
Here is JS code that concatenates the prefix with the encoded base64 data of the uploaded file via file1.value[0].
Toggle Support click preview in the Properties tab to allow users to preview the image in its full size. Hover your mouse over the image, and you see 👁 Preview. Then, you can click to preview.
In Properties > Style, change border color and set Border radius in pixels or by percentage.
On Component Playground, you can interact with the Image component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Image component.
In the Auto-Docs of Image component, we have shown how to use different properties of the Image component. It also includes the Styling properties of the Image component.
These properties are accessible in {{ }} notations, as well as in JavaScript Queries.
hidden
Boolean
Returns True or False based on whether the Modal component is hidden or not
src
String
Returns String which contains the Image source
Events give you the ability to trigger further actions (with Event-Handlers).
Click
Triggers when a User "clicks" on the Image
