Accessing resource files in the resource folder via JavaScript

[Mike-E]

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?

[DivrajSingh · Accepted solution]

@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]

@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!