Image

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.

Properties

Properties	Description
Image source	specify the source of the image to be displayed
Alt text	alternative text for the image. It is displayed when the image cannot be loaded or for users with visual impairments
Scale Type	how the image is scaled within the component's dimensions, including container, cover, fill, none, scale-down.
Event Handler	allowing users to define actions triggered by user interactions with the image
Tooltip	add a tooltip or a descriptive text that appears when the user hovers over the image
Hidden	control the visibility of the image component.
Styles	allowing users to customize its appearance. Users can apply styles such as radius

Method

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

• setImageUrl

dynamically change the source or URL of the image.

Properties	Description
Image URL	image source url

Event handler

Event	Description
Click	perform specific actions or execute code when the image component is clicked

Data

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

Property name	Description
altText	a text-based alternative that describes the content or purpose of the image
displayName	A string value that represents the name or title of the image.
events	An array or object that defines the event handlers associated with the image component, such as click
hidden	A boolean value that determines whether the image component is hidden from the user interface.
imageSrc	the source or location of the image to be displayed in the component
objectFit	how the image is fitted or scaled within the component's dimensions
radius	apply rounded corners to the image component.
tooltipText	string 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