Access Image/Asset from JavaScript

JanLoebel

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!

bjrmatos

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 https://playground.jsreport.net/studio/workspace/HywRD8Mif/9 of course you will need to adapt it to your specific case but i think it gives you the idea.

JanLoebel

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