node-html-pdf: The image is not show after convert to pdf

Below is my html code

<div>
  <img src="./cscps/images/aaa.bmp">
  <img src="./cscps/images/bbb.bmp">
  <img src="./cscps/images/ccc.bmp">
  <img src="./cscps/images/ddd.bmp">
</div>

and I set “base” option like below

var options = { 
format: 'Letter',
base: 'file://./cscps/images/' 

};

But still can not see any image in pdf file.

Anyone can help? I am using MAC system Thanks.

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Comments: 15 (1 by maintainers)

Most upvoted comments

After 2 hours of trying in vain, I ended up generating my source HTML with base64 encoded images embedded in it (instead of using paths), and that worked on first try. So, if you have control over the HTML file you’re trying to convert, this might be actually a lot simpler than trying to figure out what’s wrong with your paths (which, as other issues show, has many possible pitfalls).

file://./cscps/images/ is a relative path from the phantomjs executable. This is wrong in most cases.

Please use base: 'file://' + __dirname + '/cscps/images/' for the base option and <img src="aaa.bmp"> to reference to an image.

Hi, you need to convert the image into base64 image. Following is the solution for the same.

Using css + images

It takes css into account. The only problem I faced - it ignored my images. The solution I found was to replace url in src attrribute value by base64, e.g.

<img src="data:image/png;base64,iVBOR...kSuQmCC">

You can do it with your code or to use one of online converters, e.g. https://www.base64-image.de/

Reference Link: https://stackoverflow.com/questions/14552112/html-to-pdf-with-node-js/14552323

Your code should be

<div>
  <img src="aaa.bmp">
  <img src="bbb.bmp">
  <img src="ccc.bmp">
  <img src="ddd.bmp">
</div>
var options = { 
format: 'Letter',
base: 'file:///' + __dirname + '/images/'
}

Considering cscps is the root directory name.