Skip to main content


What is Image?

The image component in ILLA Cloud is a versatile tool that allows users to add and display images within their applications. It provides various functionalities to enhance the visual experience for users.


Image sourcespecify the source of the image to be displayed
Alt textalternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Typehow the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handlerallowing users to define actions triggered by user interactions with the image
Tooltipadd a tooltip or a descriptive text that appears when the user hovers over the image
Hiddencontrol the visibility of the image component.
Stylesallowing users to customize its appearance. Users can apply styles such as radius


You can use other components to control the component. We support the following methods:

  • setImageUrl

dynamically change the source or URL of the image.

Image URLimage source url

Event handler

Clickperform specific actions or execute code when the image component is clicked


The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
altTexta text-based alternative that describes the content or purpose of the image
displayNameA string value that represents the name or title of the image.
eventsAn array or object that defines the event handlers associated with the image component, such as click
hiddenA boolean value that determines whether the image component is hidden from the user interface.
imageSrcthe source or location of the image to be displayed in the component
objectFithow the image is fitted or scaled within the component's dimensions
radiusapply rounded corners to the image component.
tooltipTextstring value that represents the tooltip or hovers text to display when the user hovers over the image component.

Example: {{image1.displayName}}

Use case

Next, we will demonstrate how to control the image display with a button.

Step 1 Add Components

Add a Image component and a button component to the canvas.

You can set the image source of image component to any image address you want to display. Here we will use the default image as a start example and label the button as "Change" as shown below


Step 2 Configure the component

For the button component, we can configure it to set the image source of the image component to a new image address.

  1. Click the **button** component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the image1 component that you want to change as the target of the event.
  3. Choose the setImageUrl action
  4. Put the new image address in the Value field


Step 3 Test

Now that when you click the "Play" button, the image should switch