Displaying Images

Introduction

This guide walks you through the process of uploading and displaying images in your Joget apps. We will share two ways to upload images and the elements where those images can be shown.

How does it work?

Uploading Images

Before you can display an image in your Joget app, it needs to be hosted somewhere online. In Joget, you have two main options:

• Upload the image directly into your app using Joget’s built-in App Composer > Resources feature. This keeps everything centralized and easy to manage.

• Upload the image to an external image hosting service like PostImages and use the direct image link. This is useful if you want to reuse images across multiple platforms or save storage space in Joget.

Both methods provide you with a link or reference to the image, which you can then use when displaying it in your app. The choice depends on whether you prefer to manage your image assets inside Joget or externally.

Let’s go through each option step by step.

Store images within Joget

Joget provides a convenient way to manage image files within each App. You may upload images into App Composer > Resources by following these steps:

1. Go to the App Composer of your app.
2. Click on Resources in the right panel.
3. Click on the Add Resource button.
4. Choose your image file, example logo.jpg.
5. Click on the Upload button to start uploading the image.

After uploading is completed, get its Hash Variable by:

1. Clicking on the uploaded image file name
2. Take note of the Hash Variable as shown below
   Example: #appResource.logo.jpg#

Store Images to External Image Hosting

If you prefer to store your images outside Joget to preserve storage or reuse existing assets, you can use image hosting services.

For a quick example, let's use PostImages to store the image:

1. Go to the PostImages image hosting site, then upload your image

2. Copy the direct image link, for example https://i.postimg.cc/NFLqxLVm/logo.jpg

Displaying Images

Depending on where you want the image to appear, Joget provides three elements in UI Builder and two elements in Form Builder.

Image Element

This element offers the quickest way to display an image without writing any code. It is available only in the UI Builder's Page Components.

Steps:

1. In UI Builder, drag a Rich Text element
2. Click the Edit Page Components button
3. Drag the Image element into the page layout
4. In the Hyperlink field:
   If you are using App's Resources, paste the Hash Variable. For example, #appResource.logo.jpg#.
   If using an external hosting site, paste the direct image link. For example https://i.postimg.cc/NFLqxLVm/logo.jpg.
   Then adjust the Width and Height accordingly.

Rich Text Editor Element

This element lets you insert images and style content using a visual editor without writing any code. The Rich Text Editor is available as:

• Rich Text Menu element in UI Builder.
• Rich Text element in UI Builder's Page Components.
• Rich Text Editor element in Form Builder.

Steps:

1. In UI Builder, drag a Rich Text element.
   OR
   In Form Builder, drag a Rich Text Editor element.
2. Click the Insert Image button with a picture icon
3. In the URL field:
   If you are using App's Resources, paste the Hash Variable. For example, #appResource.logo.jpg#.
   If using an external hosting site, paste the direct image link. For example https://i.postimg.cc/NFLqxLVm/logo.jpg.
4. Adjust the Width and Height if needed.
5. Click Save.

HTML Element

This element allow you to write raw HTML, which is ideal for full control over how the image is displayed. The HTML element is available as:

• HTML Code element in UI Builder's Page Components.
• Custom HTML element in Form Builder.

Steps:

1. In UI Builder, drag a HTML Code element.
   OR
   In Form Builder, drag a Custom HTML element.
2. Paste the following HTML example:
   If image is stored in App's Resources:
   

   <img src="#appResource.logo.jpg#" width="200" height="200" class="border" alt="Logo">

   If image is stored at external site:
   

   <img src="https://i.postimg.cc/NFLqxLVm/logo.jpg" width="200" height="200" class="border" alt="Logo">

Expected outcome

Below is an image showing how the final result from UI Page Components should look after following the steps above:

Download sample app