Image

Introduction

The Image component is used to display images, providing users with rich layout and content presentation options.

＊Currently, animated PNG (APNG) is not supported. To display animated images, please use the Lottie component.

On the Canvas, the Image component can be displayed in various ways.

Frame Block

The Frame attributes of the Image component are the same as those of the Rect component. For details, refer to the Rect component’s Frame section.

Properties Block

The Properties of the Image component inherit the basic properties of the Rect component. For details, refer to the Rect component’s Properties section.

Additional Properties

Property Name	Property Type	Description
Resize Mode	One Of list	The resize methods that will be applied when the image's dimensions differ from the image brick's (the container's) dimensions. contain cover stretch repeat center Defines how the image is displayed when its dimensions differ from the container’s dimensions. • contain: Scales the image while maintaining aspect ratio until both width and height fit within the container. The image is fully contained but may leave empty space. • cover: Scales the image while maintaining aspect ratio until both width and height cover or exceed the container. The image fully covers, possibly cropping overflow. • stretch: Stretches the image to fill the container without maintaining aspect ratio. • repeat: Tiles the image repeatedly until the container is filled, preserving the original image size. • center: Centers the image without scaling. If the image is larger than the container, this behaves like contain.
Path	String (File/ URL) String (File / URL)	The file path of the image (URL or image files from Media Box). Set the image file path. You can also use images uploaded to Media Box.
MD5	String String (128-bit hash value)	The checksum of the file. Automatically generated checksum to ensure file integrity and consistency during transmission.
Tint Color	String String	To change the color of all non-transparent pixels of the image to the tint color. Set a tint color that overlays all non-transparent pixels of the image, replacing their original colors.
Fade Duration	ms milliseconds	The fade-in duration of the image. Set the fade-in duration for the Image component’s animation.
Avatar	Boolean Boolean (Yes/No)	To set the image as avatar (profile picture) mode. It rounds the corners of the image. Set the image to avatar (profile picture) mode, automatically rounding all four corners.
Width	Number Number	The width of the avatar. Setting this value to be equal to the image's height will make the image avatar circular. Set the width of the avatar image. When width is equal to the height, the avatar will be displayed as a circle.

Properties – Border Block

The border attributes are the same as those of the Rect component. For details, see the Rect component’s Border section.

Animations Block

The animation event attributes are the same as those of the Rect component. For details, see the Rect component’s Animation section.

Additional Animation Events

On Load

Animation that will be triggered when the image is loaded.

Animation triggered when the image is successfully loaded.

Events

The event attributes are the same as those of the Rect component. For details, see the Rect component’s Event section.

Additional Events

On Load

Event that will be triggered when the image is loaded.

Event triggered when the image is successfully loaded.

NEXT - Video

Properties Block