include a local image dynamically

  • using PhantomJS/handlebars I have a variable that comes form the database that gives me part of the name of which image to include on the report
    eg {{client}} will contain My Company and I know that on the local disk I will have a file called My Company.png that I want to include in the layout (eg) <img src="{{client}}.png"> but so far I'm not having much luck.

    I can pull the image in from a remote webserver so worst case I could host them externally to the jsreport instance (or can we get jsreport to also serve simple static http/https assets locally?

  • Here are some options...

    1. Configure assets extension to search for files on the disk
      The easiest is to do it just with this config
      "allowLocalFilesAccess": true

    then use
    <img src='{#asset myimage.png @encoding=dataURI}' />

    1. Upload the images as assets through studio
    1. reference file with absolute url
      <img src="file:///D:/work\myimage.png" />

    2. use base extension that adds the html base tag with the absolute url to your app location

    "allowLocalFilesAccess": true,
    "extensions": {
      "base": {
        "url": "${cwd}"

    then you can use just

      <img src='myimage.png' />

  • works perfectly ... thanks.
    as there's a bunch of images and I won't know what they will be as new customers are defined in the database the dynamic (rather than import) is the best solution

Log in to reply

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