Accessing resource files in the resource folder via JavaScript | Community
Skip to main content
M
Mike-E
Level 2
September 30, 2024
Solved

Accessing resource files in the resource folder via JavaScript

  • September 30, 2024
  • 2 replies
  • 638 views

I have an image in the resources folder in AEM called 'warning_triangle.png'.

I want to include this using JavaScript.

In the temporary files folder, the image is exported to:

publish\templates\dita-templates\pdf\PRESET_NAME\warning_triangle.png

The JavaScript runs on ‘mergedHTML.htm’ which exists at the same level as the publish folder,

The only way I can access the image is to give the path to it but this will change dependent on the preset name.

If I use:

var hazardImage = 'warning_triangle.png';

the image is not displayed in the resultant PDF. However if I use:

var hazardImage = 'publish\templates\dita-templates\pdf\PRESET_NAME\warning_triangle.png';

Is there a more standard way of accessing files in the resource folder without having to specify a path that includes the preset name and will vary?

Alternatively, is there a way to access the preset name in the JavaScript so I can dynamically alter the publish path to include the current preset name?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DivrajSingh

@mike-e :

Question: where will this image be used? What is the rule to inject this image to html?

In my experience, such resources are used to get applied via css - which could be the case here as you may want to add this hazard image based on note type, which can be done by:

  • adding the image "warning_triangle.png" to resources 
  • and then applying this image to note types prefix in css as:
.note::before, .note.caution::before { background-image: url('warning_triangle.png'); background-repeat: no-repeat; background-position: 10px 10px; }

 

2 replies

DivrajSingh
Adobe Employee
DivrajSinghAdobe EmployeeAccepted solution
Adobe Employee
October 2, 2024

@mike-e :

Question: where will this image be used? What is the rule to inject this image to html?

In my experience, such resources are used to get applied via css - which could be the case here as you may want to add this hazard image based on note type, which can be done by:

  • adding the image "warning_triangle.png" to resources 
  • and then applying this image to note types prefix in css as:
.note::before, .note.caution::before { background-image: url('warning_triangle.png'); background-repeat: no-repeat; background-position: 10px 10px; }

 

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    October 16, 2024

    @mike-e Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

    Kautuk Sahni
    Terms & ConditionsAccessibility statement

    Loading footer...