Container
Text
Image
Icon
Button
Local State
Text Input
Date Picker
Conditional Logic
Conditional Switch Logic
Sheet
Tabbed Pager
Data Loader
Repeating Item
Countdown Timer
Data Transformer
Date Elements
Paging Data Loader
Rich Text
The Image Componentallows you to add and display images within your app, enhancing visual appeal and communication. It supports various image formats (.png, .jpg, .jpeg, .svg, .gif, .webp) and offers flexibility in terms of size, alignment and styling, making it a versatile tool for creating a more engaging user experience.
Customisable Size
Alignment Options
Progress Indicators
1. URL
After adding your chosen image in the Image Center, click the copy URL symbol and paste this into the URL field.
2. Width
This allows you to set the horizontal size of your image. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your image is relative to the size of its container.
3. Height
This allows you to set the vertical size of your image. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your image is relative to the size of its container.
4. Loading
Select a component to display while your image is loading.
5. Fallback
Select a component to display in the event that your image fails to load.
Optimise Image Size: Use appropriately sized images to ensure fast load times without compromising quality.
Maintain Aspect Ratio: Keep the original aspect ratio to avoid distorting images unless a custom design requires otherwise.
Test on Multiple Devices: Check how the image looks on various screen sizes to ensure it's displayed properly on all devices.