webshot 不在 html 内渲染本地图像

Question

我正在使用 node-webshot 和 phantomjs-cli 将 html 字符串呈现为 png 图像。 html 包含图像标签。当 src 属性指向本地文件且未引发错误时，不会呈现图像。但是，当 src 指向 http 位置时，它会渲染图像。我已经尝试了所有我能想到的不同文件路径组合，例如

<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..

但到目前为止运气不好。有趣的是，它在我同事的 Mac 机器上运行良好，但在我的 Windows 机器上却不行，我已经尝试了两台不同的 Windows 机器，但没有成功。

下面是一些针对该问题的简化代码：

'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);      
});
*/

注释掉的代码块是它使用网络 link 作为图像源的示例，但我需要它在本地路径之外工作。

有没有人遇到过这个问题并知道如何解决？

谢谢

Answer 1

我认为你需要设置静态文件夹。

在你的代码中使用类似这样的东西app.use(express.static(path.join(__dirname, 'public')));

了解更多 here。

Answer 2

应该可以通过 file: URI 方案访问本地文件：

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

根据 specification:

A file URL takes the form:

   file://<host>/<path>

Answer 3

可能是因为你从不打开引号。尝试：

<img src="images/mushrooms.png"/>

Answer 4

可能是一个 phantomjs 问题，我之前遇到过运行错误，但到目前为止他们几乎没有维护该项目。您应该考虑切换到 Headless Chrome，这是由 Chromium 团队官方维护的新版本。

编辑：这是一个例子

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();
})();

编辑 2：here's the link the node package

webshot 不在 html 内渲染本地图像

webshot does not render local images inside html

html

javascript

node.js

phantomjs