javascript - 如何通过项目代码拦截控制台输出的报错资源问题？

Question

<img src="/不存在的图片.png" alt=""">

我通过监听error事件等等是能监听，但是浏览器默认报错资源404的问题还是在控制台打印出来了，而且是在我监听函数之前打印。

# 浏览器控制台默认打印(应该是 img 元素上的src资源问题) 
GET http://127.0.0.1:5500/不存在的图片.png 404 (Not Found)

# 这是我写的监听函数打印的，能监听到img src资源错误，但是阻止不了上面那条错误的打印。而且比他后输出
资源加载失败: http://127.0.0.1:5500/不存在的图片.png

Answer 1

浏览器控制台中的网络请求404报错是浏览器默认行为，很难完全阻止。

可以尝试使用标签配置

<img src="/可能不存在的图片.png" alt="描述" onerror="this.onerror=null; this.src='/默认图片.png';">

使用 worker

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// sw.js
self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png') || event.request.url.endsWith('.jpg')) {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return fetch('/默认图片.png');
        })
    );
  }
});

还有就是重写浏览器控制台方法

const originalFetch = window.fetch;
window.fetch = function() {
  return originalFetch.apply(this, arguments);
};

但是这种方式千万别用于线上，太不可靠了，不同的浏览器支持的不一样，还有可能造成其他问题

Answer 2

GET http://127.0.0.1:5500/不存在的图片.png 404 (Not Found)

像这样的提示是浏览器的默认行为，这个阻止不了