Geek Answers Handbook

Webshot does not display local images inside html

I am using node-webshot and phantomjs-cli to render an html string for a png image. The html contains the image tag. The image is not displayed if the src attribute points to a local file and an error does not occur. However, it displays the image when src points to the http location. I tried all different combinations of file paths that I can think of, like

<img src=images/mushrooms.png"/> <img src=images//mushrooms.png"/> <img src=c:\images\mushrooms.png"/> <img src=c:\\images\\mushrooms.png"/> <img src=file://c:\\images\\mushrooms.png"/> <img src=file://images//mushrooms.png"/> etc..

but so far no luck. Interestingly, it works fine on my peers machine, which is a Mac, but not on mine, which is Windows, and I tried with two different Windows machines without success.

Here are some simplified codes that focus on the problem:

 'use strict' const webshot = require('webshot'); console.log('generating'); webshot('<html><head></head><body><img src="c:\\images\\mushrooms.png"/></body></html>', 'output.png', {siteType: 'html'}, function(err) { console.log(err); }); /* webshot('<html><head></head><body><img src="https://s10.postimg.org/pr6zy8249/mushrooms.png"/></body></html>', 'output.png', {siteType: 'html'}, function(err) { console.log(err); }); */

The recorded code block is an example of how it works with a web link as an image source, but I need it to work with a local path.

Has anyone had this problem before knowing how to solve it?

thanks

+7
javascript html phantomjs
source share
4 answers

Local files must be accessible through the file: URI scheme:

<img src="file:///C:/images/mushrooms.png">

In specification :

 A file URL takes the form: file://<host>/<path>
+3
source share

Maybe because you never open quotes. try:

 <img src="images/mushrooms.png"/>
+2
source share

I think you need to install static folders.

Use something like this in your app.use(express.static(path.join(__dirname, 'public'))); code app.use(express.static(path.join(__dirname, 'public')));

Read more about it here .

+1
source share

Probably a problem with phantomjs , I used to encounter errors, and they barely supported the project until this date. You should upgrade to Headless Chrome , which is new and officially supported by the Chromium team.

Edit: here is an example

 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent('<html><head></head><body><img src="c:\\images\\mushrooms.png"/></body></html>'); await page.screenshot({path: 'output.png'}); await browser.close(); })();

Edit 2: here is the node package link

+1
source share

More articles:


All Articles