如何检测图片被浏览器扩展拦截以展示兜底图片

• 正在使用Instagram Widgets组件展示个人Instagram账号的最新图片内容
• 部分用户会安装Firefox版Facebook Container扩展
• 用户启用该扩展时，Instagram CDN的图片资源会被扩展拦截，控制台会输出对应拦截提示，该行为属于扩展的预期运行逻辑
• 需求：实现图片被浏览器扩展拦截的检测逻辑，拦截发生时自动为用户展示兜底图片

不要尝试通过读取控制台报错、检测用户是否安装特定扩展的方式实现，前者网页JS无控制台读取权限，后者受浏览器隐私策略限制兼容性差，且无法覆盖其他广告拦截、隐私类扩展的拦截场景。直接检测图片本身的加载状态是成本最低、兼容性最好的方案，可覆盖所有原因导致的图片加载失败场景。

方案1：利用img原生error事件（优先使用） #

所有图片资源加载失败（包括被扩展拦截、网络错误、资源不存在等场景）时，img标签都会触发原生error事件，直接在事件回调里替换兜底图即可。
原生HTML写法：

<img 
  src="目标Instagram图片地址" 
  alt="Instagram内容配图"
  onerror="this.onerror=null; this.src='本地/自有CDN兜底图地址'"
>

React写法示例：

function IgImageItem({ igImgSrc, fallbackImgSrc, altText }) {
  const handleImgError = (e) => {
    // 移除onerror监听，避免兜底图加载失败触发死循环
    e.target.onerror = null
    e.target.src = fallbackImgSrc
  }

  return <img src={igImgSrc} alt={altText} onError={handleImgError} />
}

注意：如果是动态插入页面的图片，一定要先绑定error事件，再给img的src属性赋值，避免事件绑定前资源就加载完成/失败，导致漏判。

方案2：增加超时二次校验（覆盖静默拦截场景） #

部分隐私扩展会静默阻断资源请求，少数场景下可能不触发error事件，可以增加超时检测逻辑作为补充：图片加载超时后检查图片的实际渲染状态，如果没有加载成功就替换兜底图。

/**
 * 为图片绑定加载兜底逻辑
 * @param {HTMLImageElement} imgEl 目标图片元素
 * @param {string} fallbackSrc 兜底图地址
 * @param {number} timeout 超时时间，默认5秒
 */
function bindImgFallback(imgEl, fallbackSrc, timeout = 5000) {
  const checkTimer = setTimeout(() => {
    // complete为true不代表加载成功，naturalWidth为0说明资源未实际渲染
    if (!imgEl.complete || imgEl.naturalWidth === 0) {
      imgEl.onerror = null
      imgEl.src = fallbackSrc
    }
  }, timeout)

  imgEl.addEventListener('load', () => clearTimeout(checkTimer))
  imgEl.addEventListener('error', () => {
    clearTimeout(checkTimer)
    imgEl.onerror = null
    imgEl.src = fallbackSrc
  })
}

该逻辑可以覆盖99%以上的资源拦截、加载失败场景，不需要针对特定扩展做适配，后续如果有其他拦截类扩展也能自动生效。

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