Phantomjs: Phantomjs (1.9) does not render image in footer unless it has been rendered in content

[simonking91]

I had a similar issue to this.
I was using Handlebars to generate the HTML however the images only loaded if I also included it in the content directly. This didn't work at all for me for images with a dynamic location.

My solution was to wrap the render inside of a time-out so that the HTML images had a chance to render properly.

page.onLoadFinished = function () {
  console.log('Doing something...');
  // Handlebars stuff
  page.evaluate(function (data) {
    var template = Handlebars.templates['myTemplate'];
    var result = template(data);
    document.getElementById('outputDiv').innerHTML = result;
  }, data);
  // Timeout causes this to execute after the DOM is finished
  setTimeout(function () {
    page.render('../myPDF.pdf');
    phantom.exit();
  }, 0);
};

page.open('file:///path//to//index.html', function (status) {});

[OdifYltsaeb]

The issue, as we later found out is, that both header and footer are separate html documents when it comes to phantomjs. So they need to include their own css and js imports and so on. Same with images and all.

[MrOutput]

I am also having the exact same issue. And fixed it by putting the image in the body of my template and using css to not display it, thank you @OdifYltsaeb for the temporary solution!

[Llbe]

I also ran into this issue. I can confirm it's still relevant in 2.1.

[Llbe]

Another workaround might be to use a data URI.

[bsbechtel]

I'm running into this issue now as well. For those who placed their image in the content with display: none, could you share how exactly you did this? I'm not getting it to work for me. Thanks.

[bsbechtel]

Never mind, I just got it working. For me, I had to use the exact same path as that used in the content page. I assume this is because phantomjs doesn't load resources referenced in the header/footer documents, but it does for the content?

[zackw]

This might well be a bug in PhantomJS (or, more likely, in Webkit, which would need to get reported directly to the Webkit developers) but it is unclear exactly what the problem is and what are the conditions that trigger it. The bug tracker is not for trying to work out whether something even is a bug in the first place; it is only for developing fixes to well-characterized bugs.

Everyone suffering this problem, please do the following:

1. If you are still using 1.9.x, please test 2.1, which contains a much newer version of Webkit that may well have fixed this problem. 1.9.x is end-of-life and will receive no further fixes of any kind.
2. If the problem is still present in 2.1, please read our draft troubleshooting and bug reporting guidelines, particularly the part about constructing a test case and the part about reporting Webkit bugs directly to Webkit, and follow those instructions. If this document is in any way unclear please tell us about it in the discussion thread there.

You are welcome to discuss this problem further on any of

• our experimental Discourse-based discussion forum
• the official PhantomJS users mailing-list
• Stack Overflow (with phantomjs tag)

but I am going to close this bug report now, since we (the developers) cannot take any action on it yet. Please feel free to reopen it if you determine that this really is a bug in PhantomJS 2.1 proper and you can provide a self-contained test case.

[robinfhu]

Just wanted to leave some notes to those dealing with this issue:

• Using <img src="data:image/png;base64,..."/> is a valid solution, and works. However, you must still load the image into the main content to have it "cached", otherwise it still won't work.
• If your image path is loaded via https and your SSL certificates are not configured, the image will also not load in the footer or header.
• I've also noticed that attempting to load an image from another domain is not reliable, though this may not be the case.
• It seems like you cannot put SVG inside of the footer.