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

You can bind the Image component to a qodlysource of type image, causing the displayed image to update according to the value within the qodlysource.

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.

info

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.

tip

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

Qodly displays a "missing image" placeholder in the Image component when the bound image qodlysource is null, such as when the "photo" attribute of an "Employee" entity has not been uploaded:

Use the Default Image Source property to define your own default image, allowing you to replace the standard placeholder with a custom image that fits your application's aesthetics or branding:

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.