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

Posted 2023-02-19

【中文标题】静态页面的img引用的当前文件夹是啥

【英文标题】：What is the current folder for img references of static page静态页面的img引用的当前文件夹是什么

【发布时间】：2021-11-27 15:51:19

【问题描述】：

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

例如，对于：

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

文件夹./在哪里？

【参考方案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

【讨论】：

我在 Node 应用程序中使用它。那会有什么不同吗？没有window 对象。

我已经更新了我的测试结果

【参考方案2】：

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

例如，如果 URL 是

mydomain.com/directory1/page.html

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

【讨论】：

嗯...没有 url，因此没有域。该页面由一串 Html 文本呈现。

这种情况下图片必须和页面在同一目录下