Image

The Image component is used to display an image within a page. It offers customizable dimensions and allows for the inclusion of a hyperlink, providing flexibility in how images are presented and interacted with.

How does it work?

The Image component in Joget allows you to display images on a page with customizable dimensions and hyperlink options. Here's how to use and configure it:

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Access the Joget DX 8 Showcase UI to set up a testing environment for the Image.
   
3. Select an UI element into any category you like. For example, Accordion.
4. Click Edit Page Components.
   
5. Drag and drop the Image component from the component palette onto your page.
6. Add the link for the image to the field hyperlink, and customize the width and height as needed.
   
7. Click Preview to check how the image appears and interacts on the page.
   

Using the Image component, you can integrate interactive images effectively to enhance your page's visual appeal and functionality.

Configure image

To configure the Image component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Image page component into the page for editing.

When adding the Image component, you will see the following fields available for configuration:

• ID: Assign a custom ID to the image. This ID must be unique to avoid conflicts with other page components. For example, productImage.
• Hyperlink: Link for the image.
• Width: Specify the width of the image. 
• Height: Specify the height of the image.

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.