The Image component is a UI element that enables you to integrate images into your webform.
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 datasources.
- Data Visualization: Display charts, graphs, and diagrams as images, enabling the visualization of complex data in a more accessible and engaging manner.
The Image component offers multiple options for displaying images:
- Datasource Binding: You can bind the Image component to a datasource of type
image, causing the displayed image to update according to the value within the datasource.
- Image Source: Alternatively, you can specify an image source directly. This source can be a URL or a path to the image stored in the Shared folder.
For instance, if you've uploaded an image named "booking.png", you can set the image source as
- 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/imagessubdirectory. The component's image source is updated accordingly.
Alternatively, you can establish the connection by dragging and dropping an image datasource onto the webform, which will automatically add an Image component with the datasource bound to it.
Triggers and Events
The Image component can respond to various events, enabling dynamic user experiences. Events that can trigger actions within the component include:
|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.|