Displaying Images

Introduction

This guide walks you through the process of uploading and displaying images in your Joget apps.

Here we will share two ways to upload images and two types of elements where those images can be shown.

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 Imgur or 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 the images within Joget

Joget provides a convenient way to manage image files within each App.

Here are the steps:

1. Go to App Composer of your app.

2. Click on Resources in the left panel.

3. Select Add Resource.

4. Upload your image file (e.g. logo.png, header.jpg).

5. After uploading, click the resource file to get its Hash Variable
   Example:
   #appResource.logo.png#

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 like:

• Imgur

• Postimages

Here are the steps:

1. Go to the image hosting site

2. Upload your image

3. Copy the direct image link, for example https://i.imgur.com/yourImage123.png.

Displaying Images in Joget

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

Using Custom HTML (Form Builder) or HTML Code (UI Builder)

These elements allow you to write raw HTML, which is ideal for full control over how the image is displayed.

Steps:

1. In Form Builder, drag a Custom HTML element
   OR
   In UI Builder, drag an HTML Code element

2. Paste the following HTML:
   If using App Resource:

   <img src="#appResource.logo.png#" alt="Logo" style="width:200px;">

   
   If using an external link:

   <img src="https://i.imgur.com/yourImage123.png" alt="External Image" style="width:200px;">

Using Rich Text Editor (Form Builder) or Rich Text (UI Builder)

These elements let you insert and style content using a visual editor (TinyMCE or Quill), without writing any code.

Steps:

1. In Form Builder, drag a Rich Text Editor element.
   OR
   In UI Builder, drag a Rich Text element.

2. Click the Insert Image button with a picture icon.

3. In the URL field:

   • If you are using App Resource, paste the Hash Variable. For example, #appResource.logo.png#.

   • If using an external hosting site, paste the direct image link.

4. Adjust the width or alignment if needed.

5. Click Insert