静态页面的img引用的当前文件夹是什么

Question

当使用某些静态Html内容的page.setContent方法渲染页面时，img标签的src等属性的当前文件夹是什么？

例如，对于：

await page.setContent("<img src="./pic.jpg" />");

文件夹./在哪里？

Answer 1

可能是undefined，这是我的测试结果：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  page.on('request', request => console.log('send request: ' + request.url()));
  page.on('console', message => console.log('console: ' + message.text()));
  await page.setContent('<img src="./test.jpg" /><script>console.log("href="+window.location.href);</script>');
  await browser.close();
})();

输出：

console: href=about:blank

页面 URL 为 about:blank，没有发送任何请求。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  page.on('request', request => console.log('send request: ' + request.url()));
  page.on('console', message => console.log('console: ' + message.text()));
  await page.setContent('<base href="https://www.google.com"><img src="./test.jpg" /><script>console.log("href="+window.location.href);</script>');
  await browser.close();
})();

输出：

console: href=about:blank
send request: https://www.google.com/test.jpg
console: Failed to load resource: the server responded with a status of 404 ()

在 URL 仍为 about:blank 时附加 base 元素后浏览器请求 test.jpg

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  page.on('request', request => console.log('send request: ' + request.url()));
  page.on('console', message => console.log('console: ' + message.text()));
  // set base href to local URL
  await page.setContent('<base href="file:///abc/index.html"><img src="./test.jpg" /><script>console.log("href="+window.location.href);</script>');
  await browser.close();
})();

输出：

console: href=about:blank
console: Not allowed to load local resource: file:///abc/test.jpg
send request: file:///abc/test.jpg

Answer 2

该文件夹位于您正在访问的页面中。

例如，如果 URL 是

mydomain.com/directory1/page.html

图片可以在 mydomain.com/directory1/pic.jpg 找到