jsdom加载外部脚本时图片资源加载报错（已装canvas）如何解决？

该报错的核心触发原因是：JSDOM的图片资源解析逻辑依赖canvas库，当图片请求返回204无内容响应时，canvas无法将空响应体解析为合法的图片格式，因此抛出加载失败错误。

方法1：自定义资源加载器拦截204图片响应 #

你可以在JSDOM初始化时传入自定义的ResourceLoader，替换默认的资源加载逻辑，遇到返回204的图片请求直接返回合法的占位图片内容，避免触发解析错误：

const { JSDOM, ResourceLoader } = require('jsdom');

class CustomResourceLoader extends ResourceLoader {
  async fetch(url, options) {
    // 仅处理图片类请求，可按需添加域名过滤规则
    if (options.element?.tagName === 'IMG') {
      const res = await super.fetch(url, options);
      // 拦截204状态码的空响应
      if (res?.status === 204) {
        // 返回1x1透明GIF的base64转码buffer，满足图片解析要求
        return Buffer.from('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'base64');
      }
      return res;
    }
    return super.fetch(url, options);
  }
}

// JSDOM初始化配置
new JSDOM(
  `<!DOCTYPE html>
          <html>
              <head>
                <script src="https://www.websitewithjs.js"></script></head>
              <body>
                <p>My Test page</p>
              </body>
          </html>`,
  { 
    runScripts: "dangerously", 
    url: `${origin}`, 
    origin: `${origin}`, 
    pretendToBeVisual: true, 
    virtualConsole: createVirtualConsole(),
    // 替换原有resources: "usable"配置
    resources: new CustomResourceLoader()
  }
);

方法2：过滤非必要图片加载 #

如果第三方脚本加载的图片不影响你的核心业务逻辑，可以直接在资源加载阶段拦截图片请求，不加载非必要资源从根源避免报错：

class FilterResourceLoader extends ResourceLoader {
  fetch(url, options) {
    // 拦截所有图片请求，可自行添加白/黑名单规则
    if (options.element?.tagName === 'IMG') {
      // 返回null表示不加载该资源
      return null;
    }
    return super.fetch(url, options);
  }
}

初始化JSDOM时将resources配置为new FilterResourceLoader()即可生效。

方法3：静默捕获无关报错 #

如果你不需要修改资源加载逻辑，也可以通过virtualConsole过滤该类报错，避免打断程序正常运行：

const virtualConsole = createVirtualConsole();
virtualConsole.on('error', (msg) => {
  // 过滤图片加载失败的非关键报错
  if (msg.startsWith('Could not load img:')) {
    return;
  }
  // 其他错误正常输出
  console.error(msg);
});

初始化JSDOM时传入该自定义virtualConsole即可。

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