调用page.setContent渲染静态HTML时img标签src相对路径当前目录是什么

核心结论 #

直接调用page.setContent渲染HTML内容时，若没有显式指定基路径，页面默认的基地址为about:blank，此时标签中写的相对路径（比如示例中的./pic.jpg里的./）没有对应的实际本地文件夹，会直接触发资源加载失败。

配置相对路径根目录的方案 #

如果需要让相对路径指向指定的本地目录，可选用以下两种方法实现：

• 方法1：调用setContent时传入baseURL参数，该参数的值会作为所有相对路径的拼接基准。指向本地目录时需要用file://协议拼接本地绝对路径，末尾需加斜杠，示例代码：

// 此处配置后，HTML 中的 ./ 就对应本地的 /home/your_project/static 目录
await page.setContent('<img src="./pic.jpg" />', {
  baseURL: 'file:///home/your_project/static/'
});

• 方法2：直接在HTML内容的head标签内添加<base>标签指定基准路径，效果和baseURL参数一致，示例代码：

await page.setContent(`
  <head>
    <base href="file:///home/your_project/static/" />
  </head>
  <img src="./pic.jpg" />
`);

内容的提问来源于stack exchange，提问作者u936293