How to dynamically add an image in the report?

  • Hi,
    In my work, I need to insert multiple images in the reports, and these images are dynamically added with the expressjs app (meaning there might be a report with only image and some reports might have multiple images).

    Is there any way to accomplish this? it is a very important part of my reports.

    P.S. I checked the Assets I am a bit confused since in docs it says: You can create an asset using jsreport studio ... but I don't want to use jsreport studio for each report that I am generating.


  • administrators

    @seerat89 hi! the assets extension is only useful for static things, files that you have available during the template creation and basically don't change during the template execution, it can be fonts, some images, etc.

    for dynamic images, the assets are not the right approach. you need to pass the images in the data that you send, there are basically two approaches you can take, it depends mostly if you host your files in some server or not.

    • if you have the dynamic images hosted on some server (this means you upload the images you are going to use sometime before the creation of the report) and that server is able to serve them, then you can just pass urls to your data, and in the template just iterate your data and render a normal img element <img src={{imageURL}}} />
    • if you don't have the dynamic images hosted, then you can just pass the images as data uri, which is basically the image in base64 encoding as string, and in the template yo do the same and just use an img element <img src={{imageDataURI}}} />

  • @bjrmatos thank you very much for your very useful information.

  • @bjrmatos Hi, I tried the solution <img src={{imageURL}} /> but the output is: <img src= />.

    here is what I am doing:
    -> I have created a word document template, and uploaded to jsreport
    -> I use the (handlebar) engine and (docx) recipe

Log in to reply

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