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 containMy Company
and I know that on the local disk I will have a file calledMy 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...
- Configure assets extension to search for files on the disk
https://jsreport.net/learn/assets#external-files-access
The easiest is to do it just with this config
{ "allowLocalFilesAccess": true }
then use
<img src='{#asset myimage.png @encoding=dataURI}' />
- Upload the images as assets through studio
https://jsreport.net/learn/assets
-
reference file with absolute url
<img src="file:///D:/work\myimage.png" />
-
use base extension that adds the html base tag with the absolute url to your app location
https://jsreport.net/learn/base
"allowLocalFilesAccess": true, "extensions": { "base": { "url": "${cwd}" } }
then you can use just
<html> <head></head> <body> <img src='myimage.png' /> </body> </html>
- Configure assets extension to search for files on the disk
-
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