Access Image/Asset from JavaScript

  • Hi there,

    I have a question/problem regarding my report I want to create. I have a map (leaflet) and want to add a customized marker with different icons, depending on the incoming data. Therefore I have a custom MarkerIcon which creates an IMG-Html-Tag and set the src to the image.

    _createCategoryPin(categorieId) {
        const pinSvg = document.createElement('img'); 
        const imageSrc = `{#image ${categorieId.toLowerCase()} }`;
        const imageSrc2 = '{#image ' + categorieId.toLowerCase() + '}';
        const imageSrc3 = '{#image 506e1ae7-998d-4d63-aa6c-e5bb6a170b2b}';
        console.log('imageSrc:', imageSrc, imageSrc2, imageSrc3);
        pinSvg.src = imageSrc;
        return pinSvg;

    imageSrc and imageSrc2 are not working, imageSrc3 is working.

    I'm pretty sure that handlebars find imageSrc3 as a valid "to be replaced" and replace it with the matching value. imageSrc and imageSrc2 build at runtime after Handlebars was already executed so it won't work.
    Can I execute the handlebar helper afterward again, or is there any other way to access my images in JavaScript dynamically?

    I appreciate every tip :) Thank you so much!

  • administrators

    hi! i think one way to solve your problem is resolving all the images that you are going to use and save the output in html, then with javascript just collect all the resolved values and use them when you have to. here is an example that shows how to do something like that of course you will need to adapt it to your specific case but i think it gives you the idea.

  • Hi, thank you for your reply, I get the idea. I was thinking about a similar approach but thought there would be a better option. But thanks, I will give it a try :)

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.