Image rendering in content but not header :( HELP

Rupesh Clicker

const jsreport = require('jsreport');

router.get('/jsreport', (req, res) => {

const headerImageUrl = 'http://wallpaperlatest.com/wp-content/uploads/cool-latest-hd-wallpaper.jpg;
const invoiceTemplate = <img src='${headerImageUrl}' style="display: none;"></img> <h1> Invoice </h1> <div><span>from: {{:from}}</span></div> <div><span>to: {{:to}}</span></div> <div><span>price: \${{:price}}</span></div> <div style='page-break-before: always;'></div> <h1>Hello from Page 2</h1>;

jsreport.render({
template: {
  content: invoiceTemplate,
  engine: 'jsrender',
  recipe: 'phantom-pdf',
  phantom: {
    header: `<img src='${headerImageUrl}' width="135" height="25"/> <span>My Great Report</span>`,
    footer: '<span>{#pageNum}/{#numPages}</span>',
  }
},
data: {
  from: 'Bob Barker',
  to: 'Amy Adams',
  price: 41.99,
},

}).then(function(out) {
console.log('SUCCESS!');
out.stream.pipe(res);
}).catch(function(e) {
console.log('error ');
console.log(e);
res.end(e.message);
});
});

Rupesh Clicker

const jsreport = require('jsreport');

router.get('/jsreport', (req, res) => {

const headerImageUrl = 'http://wallpaperlatest.com/wp-content/uploads/biker-destination-hd-wallpaper-latest.jpg;

Have a look here: <img src='${headerImageUrl}' style="display: none;"></img> <h1> Invoice </h1> <div><span>from: {{:from}}</span></div> <div><span>to: {{:to}}</span></div> <div><span>price: ${{:price}}</span></div> <div style='page-break-before: always;'></div> <h1>Hello from Page 2</h1>;

Rupesh Clicker

http://wallpaperlatest.com/3d-wallpaper/

jan_blaha

Can you try a different image? Perhaps smaller?
Please try to replicate the problem in playground so we can take a look.
https://playground.jsreport.net