I'm using node-webshot and phantomjs-cli to render an html string to a png image. The html contains an image tag. The image is not rendered when it is the src attribute points to a local file and no error is raised. However it does render the image when the src points to a http location. I've tried all of the different file path binations that I can think of, eg
<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 colleague's machine which is a Mac but not on mine which is Windows, and I've tried with two different Windows machines with no success.
Here is some simplified code that focuses on the issue:
'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=".png"/></body></html>', 'output.png', {siteType: 'html'}, function(err) {
console.log(err);
});
*/
The mented out code block is an example of it working with a web link as the image source but I need it to work off of a local path.
Has anyone had this issue before an know how to solve it?
Thanks
I'm using node-webshot and phantomjs-cli to render an html string to a png image. The html contains an image tag. The image is not rendered when it is the src attribute points to a local file and no error is raised. However it does render the image when the src points to a http location. I've tried all of the different file path binations that I can think of, eg
<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 colleague's machine which is a Mac but not on mine which is Windows, and I've tried with two different Windows machines with no success.
Here is some simplified code that focuses on the issue:
'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/pr6zy8249/mushrooms.png"/></body></html>', 'output.png', {siteType: 'html'}, function(err) {
console.log(err);
});
*/
The mented out code block is an example of it working with a web link as the image source but I need it to work off of a local path.
Has anyone had this issue before an know how to solve it?
Thanks
Share Improve this question asked Jan 15, 2018 at 10:18 There is no spoonThere is no spoon 1,8062 gold badges24 silver badges55 bronze badges 6- 1 It would be quite dangerous if browsers could just open random files from the local file-system - guessing you can't just host the files locally on Apache or somesuch? – Evan Knowles Commented Jan 15, 2018 at 10:59
- it could be a security measure of your browser indeed (see social.technet.microsoft./Forums/ie/en-US/… for example) – St3an Commented Jan 15, 2018 at 13:58
- thanks for your replies. I'm running the script under nodejs and not in a browser. I can use fs to read local files and this code works fine on a Mac, just doesn't seem to work in windows. – There is no spoon Commented Jan 15, 2018 at 18:55
- Is the image part of the node.js project or just on the machine somewhere else? – RickyM Commented Jan 18, 2018 at 15:26
- As the first 2 path you provide is a relative path, I think it may be related to the position of the image files. – cytsunny Commented Jan 19, 2018 at 9:06
4 Answers
Reset to default 4 +100Local files should be accessible via the file: URI Scheme:
<img src="file:///C:/images/mushrooms.png">
Per the specification:
A file URL takes the form:
file://<host>/<path>
I think that you need to set static folders.
Use something like this in your code app.use(express.static(path.join(__dirname, 'public')));
Learn more about it here.
Can be because you never open the quotes. try:
<img src="images/mushrooms.png"/>
Likely a phantomjs problem, I've run into bugs before and they barely maintain the project to this date. You should consider switching to Headless Chrome, which is new and officially maintained by the Chromium team.
Edit: here's 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's the link the node package