- Image
🧬 Assemble components
Image
ContributeWhat 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.
- Click the
**button**component to open its inspect page. UnderEvent handler, click**+ New**. - In the Edit event handler, select
Control componentin action, and select theimage1component that you want to change as the target of the event. - Choose the
setImageUrlaction - Put the new image address in the
Valuefield
Step 3 Test
Now that when you click the “Play” button, the image should switch
