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

Question

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

例如，对于：

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

文件夹 ./ 在哪里？

Answer 1

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

例如，如果 URL 是

我的域名。com/directory1/page.html

图片可以在我的域中找到。com/directory1/pic.jpg

Answer 2

可能是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 ()

浏览器请求 test.jpg 添加 base 元素后 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()));
  // 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

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

What is the current folder for img references of static page

google-chrome-headless

puppeteer