如何使用JavaScript或jQuery获取图片错误状态码？

当你修改图片元素的src属性后，若加载失败，可通过以下两种方式获取错误状态码：

• 直接监听error事件（有限支持状态码）
  部分浏览器会在error事件对象中返回状态码，代码示例：

  const img = document.querySelector('img');
  img.src = '你的新图片地址.jpg';
  img.onerror = function(event) {
    if (event.target.error && event.target.error.status) {
      console.log('错误状态码:', event.target.error.status);
    } else {
      console.log('仅确认加载失败，无法获取状态码');
    }
  };
  

• 用fetch预校验资源（更可靠获取状态码）
  先通过HEAD请求确认资源状态，再设置图片src，能稳定拿到HTTP状态码：

  const img = document.querySelector('img');
  const newSrc = '你的新图片地址.jpg';
  
  fetch(newSrc, { method: 'HEAD' })
    .then(response => {
      if (response.ok) {
        img.src = newSrc;
      } else {
        console.log('错误状态码:', response.status);
        img.src = '备用图片地址.jpg'; // 加载失败时设置备用图
      }
    })
    .catch(err => {
      console.log('网络请求出错:', err);
      img.src = '备用图片地址.jpg';
    });
  

注意：error事件返回状态码的特性并非所有浏览器都支持；跨域资源需服务器配置CORS允许HEAD请求，否则fetch会因跨域限制无法获取状态。

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