Image
The Image component is a UI element that enables you to integrate images into your Page.
Use Cases
The Image component offers versatile solutions for enhancing your web application's visual experience:
- Static Images: Display fixed visual elements, such as logos, icons, and decorative images.
- Dynamic Content: Display dynamic content fetched from qodlysources.
- Data Visualization: Display charts, graphs, and diagrams as images, enabling the visualization of complex data in a more accessible and engaging manner.
Display Options
The Image component offers multiple options for displaying images.
Qodly Source Binding
image
, causing the displayed image to update according to the value within the qodlysource.Image Source
For instance, if you've uploaded an image named "booking.png" in a "visuals" folder, you can set the image source as /$shared/visuals/booking.png
.
Image Management
Direct Image Upload
The Image component simplifies the process of adding new images. By clicking on the image component and uploading the desired picture, the image is automatically added to the Shared folder's /$shared/assets/images
subdirectory. The component's image source is updated accordingly.
Alternatively, you can establish the connection by dragging and dropping an image qodlysource onto the Page, which will automatically add an Image component with the qodlysource bound to it.
Default Image Source
Drag and Drop from Shared Folder
The Image component supports a drag and drop functionality that allows users to move images directly from a shared folder to become the image source. This feature is particularly useful for rapidly updating the image souce without the need for navigating through files.
Triggers and Events
The Image component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
Event | Description |
---|---|
On Click | Calls for an action when the user clicks on the component. |
On MouseEnter | Calls for an action when the user's mouse cursor enters the area of the component. |
On MouseLeave | Calls for an action when the user's mouse cursor exits the area of the component. |