使用Puppeteer生成PDF时外部图片不显示的问题求助

在使用Puppeteer结合Handlebars将HTML模板转为PDF时，若外部链接图片在浏览器（无头模式）显示正常，但生成PDF后消失且无报错，可尝试以下几种解决办法：

1. 等待图片完全加载后再生成PDF #

当前代码中page.setContent使用的waitUntil: "domcontentloaded"仅等待DOM加载完成，此时图片可能还未完全下载渲染。可改为等待网络请求 idle 状态，或显式等待目标图片加载完成：

修改setContent的等待策略 #

await page.setContent(content, { waitUntil: "networkidle0" });

networkidle0表示在500ms内没有任何网络请求时，才认为页面加载完成，能确保图片等资源加载完毕。

显式等待目标图片可见 #

await page.setContent(content, { waitUntil: "domcontentloaded" });
// 等待目标图片加载并显示
await page.waitForSelector('img[src="https://res.cloudinary.com/baltasar-montero-vidaurreta-175/image/upload/v1687201343/algira/thumbnails/ALGIRA.webp"]', { visible: true });

2. 为图片设置明确的宽高属性 #

部分情况下，图片未设置宽高时，PDF渲染引擎可能无法识别其尺寸，导致图片被渲染为0x0大小而不可见。可直接在HTML的img标签中添加宽高，或通过CSS设置：

修改HTML中的img标签 #

<img src="https://res.cloudinary.com/baltasar-montero-vidaurreta-175/image/upload/v1687201343/algira/thumbnails/ALGIRA.webp"
     alt="algira"
     width="200"
     height="100"
/>

通过CSS强制设置尺寸 #

.logo img {
  width: 200px;
  height: auto;
  display: block; /* 确保图片为块级元素，避免渲染异常 */
}

3. 禁用缓存强制重新加载图片 #

缓存问题可能导致图片未正确加载到PDF渲染流程中，可禁用页面缓存后再加载内容：

await page.setCacheEnabled(false);
await page.setContent(content, { waitUntil: "networkidle0" });

4. 调整浏览器启动参数或HTTP头 #

部分外部图片的CORS策略或权限限制，可能在PDF渲染时触发不同的处理逻辑。可尝试添加浏览器启动参数或设置HTTP头：

添加浏览器启动参数 #

const browser = await puppeteer.launch({
  headless: false,
  args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process']
});

设置HTTP请求头 #

await page.setExtraHTTPHeaders({
  'Accept': 'image/webp,image/*,*/*;q=0.8'
});

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