Unable to Display Images in Email Templates Using App Resources

Description

In Joget DX 8, images stored as App Resources (for example .jpg or .png files) may not display correctly when used inside Email Tool templates. This knowledge base article explains the cause of the issue and provides the correct configuration and syntax to successfully render images in email notifications

When attempting to embed images in an email template using either:

• #appResource# hash variables, or

• direct resource URLs

…the images do not appear in the received email, even though they exist in App Resources.

Example image tags that fail to render:

<img src="#appResource.alyaumi.png#" />
<img src="/jw/web/app/AlYaumiProject/resources/alyaumi.png" />
<img src="#request.scheme#://#request.serverName#/jw/web/app/AlYaumiProject/resources/alyaumijpg.jpg" />

Cause

Email clients cannot access:

• protected Joget resources, or

• locally hosted Joget instances (such as localhost or internal network URLs).

As a result, images stored in App Resources will not load unless:

1. The resources are publicly accessible, and

2. The Joget server itself is reachable from the internet.

Solution

To display images from App Resources in Joget DX 8 email templates, follow the steps below.

Update Resource Permissions

Navigate to:

1. App Composer > Resources > Edit Resources
2. For each image used in the email template:
   • Remove all permissions
   • Leave the permission field empty
3. This allows the image to be accessed publicly by email clients.

Ensure Joget Is Publicly Accessible

Joget must be deployed on a server that is reachable from the internet, such as:

• Joget Cloud
• A public IP or hostname

Use the Correct HTML Syntax in Email Templates

Use absolute URLs when referencing images in email content.

Using appResource hash variable

<p><img src="#request.scheme#://#request.serverName#:#request.serverPort##appResource.alyaumi.jpg#" /></p>
<p><img src="#request.scheme#://#request.serverName#:#request.serverPort##appResource.alyaumi.png#" /></p>

Using direct resource URL

<p><img src="#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/app/T2805_resource_image/resources/alyaumi.jpg" /></p>
<p><img src="#request.scheme#://#request.serverName#:#request.serverPort#/jw/web/app/T2805_resource_image/resources/alyaumi.png" /></p>

Download Sample App