Image

The Image widget displays raster images such as PNG and JPG on screen.
It loads images from a range of sources — assets (project resources), the network (URL), or a file — and draws them with the size, fit, and alignment you specify.

Definition and role

The Image widget reads the image source you specify and draws it on screen. If the image is missing or fails to load, it shows the placeholder image instead. Configure the size (width, height), fit, alignment, repeat, and color filter as needed.

• Category: Contents
• Supported image sources (pick one in the image property): assetImage (a project asset — automatically picks the resolution variant that matches the screen scale), exactAssetImage (loads a project asset at exactly the path and scale you give), networkImage (a remote image over URL), fileImage (a device file path). Default assetImage
• Default image source: an empty asset (you need to set one)

Features

Feature	Description
Image display	Draws asset, network (URL), and file images on screen.
Placeholder image	Shows the fallback image set in placeholder when the image is missing or fails to load.
Size and fit	Adjust the display area with the width, height, and fit (how the image fills the area).
Color filter	Tints the image with color and colorBlendMode.
Repeat and alignment	Tiles the image with repeat and positions it with alignment.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the Image item onto the canvas.
3. In the property panel on the right, set image to the image source you want to show — an asset, a URL, or a file.
4. Adjust the size and fit with width, height, and fit if needed.
5. Set placeholder to a fallback image in case loading fails.

Properties

Property	Description	Default	Value / type
image	The image source to display. Pick the source kind from assetImage, exactAssetImage, networkImage, or fileImage, then point it at the source to load.	An empty asset (you need to set one)	Image source
placeholder	Name of the fallback image asset shown when the image is missing or fails to load	Not set	String (asset name)
Size	Image size — a grouped property that sets the width and height together	Not set	Size (width and height, number in px)
color	The color layered over the image	Not set	Color
colorBlendMode	How color blends with the image	Not set	Blend mode
fit	How the image fills the display area	Not set	fill, contain, cover, fitWidth, fitHeight, none, scaleDown
alignment	Image alignment inside the display area	Center	Alignment value
repeat	How the image repeats	noRepeat (no repeat)	repeat, repeatX, repeatY, noRepeat
centerSlice	The center area stretched by 9-slice scaling	Not set	Rectangular area
matchTextDirection	Flips the image to match the text direction	false	True/false
gaplessPlayback	Keeps the previous image while a new one loads to prevent flicker	false	True/false
isAntiAlias	Applies anti-aliasing to smooth edges — this does not work in the current version.	false	True/false
filterQuality	Image scaling quality	low	none, low, medium, high
semanticLabel	Description read by accessibility screen readers	Not set	String
excludeFromSemantics	Excludes the widget from accessibility information	false	True/false

Notes and tips

warning

If you leave image unset or the source cannot be found, no image appears. In that case the fallback image set in placeholder is shown instead.

tip

Network (URL) images automatically fall back to the placeholder image while loading and when loading fails. Asset images use the name of a resource registered in the project.

Learn more

tip

For the full set of Widget Controls (Property, Method, Event) that let you drive this widget from a script, visit Image Widget Control.