Image
The Image widget is used to show an image from uploaded assets or the URL link. The Image widget can display the different types of images such as JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.

Here's how you can add the Image widget to your project:
- 1.Drag the Image widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
- 3.Find the Path property and enter the URL for the new image.
- 4.Find the Cache checkbox below, click on it to checkmark. Enabling cache will store the image and display it even when the internet is not available.

Every Image widget added to the project will show a random image from picsum.com by default.
To change the height and width of the image:
- 1.Select the Image from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
- 3.Find the Width and Height.
- 4.There are three ways to set the image dimensions:
- 1.To set to an exact size, select PX and enter the desired values.
- 2.To set the dimensions as a % of the screen size, select % and enter the desired value.
- 3.To make the height or width of the image the screen's height or width, just click on the infinity icon ().
An image inside of the container is constrained by the dimensions of the container. If you want to increase the image size, you will also need to increase the container size.
.gif?alt=media&token=8f491e35-77d3-4b82-9f9c-73c5a5fda92b)
Changing the Border Radius allows you to create rounded corners for the image.
Here's an example of how to create rounded corners:
- 1.Select Image from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
- 3.Find the Border Radius property enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon () to change each corner separately.
.gif?alt=media&token=69ff08bd-648d-4664-b4c7-23e9499daab5)
Changing the Box Fit value allows you to control how the image should display inside the Image widget. Various options under the Box Fit property helps you scale (grow or shrink in size) the image inside the Image widget.
To change the Box Fit value:
- 1.Select Image from the widget tree or from the canvas area.
- 2.Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
- 3.Find the Box Fit dropdown, try changing it to the other values to get the perfect image.
.gif?alt=media&token=1761e726-f1f2-4bc9-b8af-02965298003a)
Here are all the options that are available for the Box Fit property.
Cover
Contain
Fit Width
Fit Height
Scale Down
Fill
Cover: It shows the image as small as possible while still covering the entire Image widget.

Contain: It shows the image as large as possible while still containing entirely in the Image widget.

Fit Width: It tries to show the full width of the image, and does not care about the height even if the image gets clipped vertically.

Fit Height: It tries to show the full height of the image, and does not care about the width even if the image gets clipped horizontally.

Scale Down: It aligns the image in the center and if required it can also shrink the image(Keeping it proportional) to make it fully visible.

Fill: It shows the image as the exact size of the Image widget by distorting the image’s aspect ratio.

When an image exceeds its boundaries and you need to display a particular portion of it, simply select the Image widget and navigate to the Properties Panel > Image > use the Image Alignment property.
You can set any pre-defined alignment from the grid or use the X and Y boxes to set the precise alignment. For example, X and Y values as (-1.0, -1.0) aligns the image to the top-left corner, (1.0, 1.0) aligns it to the bottom right, and (0.0, 1.0) aligns the bottom of the image with the bottom edge.
To show the data retrieved from your Firestore collection and document into the Image widget, ensure you:
- 1.
- 2.
- 3.
- 4.
Last modified 3d ago