图片加载失败时未触发onerror事件，导致降级处理失效

Question

图片加载失败时 `onerror` 事件未触发，是前端常见的降级失效问题。典型场景包括：图片 URL 为合法但返回 404/500 的服务端响应、跨域资源被 CORS 策略拦截（此时浏览器静默失败，不触发 `onerror`）、或 `` 标签动态插入后立即绑定 `onerror` 但图片已缓存失败（事件错过）；此外，使用 `loading="lazy"` 时部分浏览器在懒加载阶段错误抑制 `onerror`，或 Vue/React 等框架中因响应式更新时机导致事件监听器挂载滞后。更隐蔽的是，某些 CDN 或代理服务对无效图片返回 200 状态码 + 占位图（如 1×1 透明 GIF），使浏览器判定“加载成功”，完全绕过 `onerror`。结果导致备用图、错误提示、上报逻辑全部失效。根本原因在于 `onerror` 仅捕获网络请求异常或解析失败，无法覆盖语义性失败（如空内容、伪装成功响应）。解决方案需组合使用 `img.naturalWidth === 0` 检测、`AbortController` 主动超时判断、Service Worker 拦截响应状态，或改用 `` + `fallback` 语义化降级。

Answer 1

```html

一、现象层：onerror 为何“静默失联”？——浏览器行为与常见误判

开发者常默认 <img onerror="handleError()"> 是图片失败的“兜底开关”，但实际中大量场景下该事件根本不会触发。典型表现包括：

• URL 合法但服务端返回 404 或 500（部分旧版 Safari/IE 在 CORS 预检失败时也不抛 error）；
• 跨域图片被 CORS 策略拦截后，浏览器仅清空 img.naturalWidth/Height，不派发任何事件；
• 动态插入 <img> 后立即绑定 onerror，而图片已从缓存中加载失败（complete === true && naturalWidth === 0）；
• loading="lazy" 在 Chrome 98–104 中存在 onerror 被延迟或丢弃的 Bug（Chromium #1302763）。

二、机制层：onerror 的能力边界与语义鸿沟

onerror 本质是 DOM Level 0 的资源加载错误钩子，其触发条件严格限定于：
✅ 网络连接中断 / DNS 失败 / TLS 握手失败
✅ HTTP 响应体为空或无法解析为图像格式（如返回 HTML 错误页）
❌ 返回 200 OK + 有效图像格式（哪怕只是 1×1 透明 GIF）
❌ CORS 拒绝后返回 opaque 响应（img.currentSrc 可读，但 naturalWidth === 0 且无事件）
❌ Service Worker 拦截并伪造响应（如 CDN 返回占位图）

三、框架层：响应式系统加剧监听时机错位

框架	典型风险点	触发条件示例
Vue 3（Composition API）	ref() 图片元素在 onMounted 后才获取，但 DOM 已完成加载	<img :src="url" ref="imgRef"> 中 url 初始值即为坏链
React（Fiber）	useEffect 挂载监听器晚于图片加载完成	SSR 渲染后客户端 hydration 阶段，图片已进入 complete === true 状态

四、检测层：超越 onerror 的多维验证矩阵

需组合以下信号交叉验证“是否真图”：

function isImageValid(img) {
  return (
    img.complete &&
    img.naturalWidth > 0 &&
    img.naturalHeight > 0 &&
    img.width > 0 &&
    img.height > 0 &&
    getComputedStyle(img).visibility !== 'hidden'
  );
}

⚠️ 注意：naturalWidth === 0 是最稳定指标（即使 CORS 拦截、200 占位图均会命中），但需配合 load 和 error 事件做状态机驱动。

五、防御层：主动式加载控制与降级演进路径

graph LR
A[发起图片请求] --> B{是否启用 AbortController?}
B -- 是 --> C[设置 8s 超时]
B -- 否 --> D[依赖原生事件]
C --> E[超时则强制触发 fallback]
D --> F[监听 load/error]
F --> G{naturalWidth === 0?}
G -- 是 --> H[执行备用图 + 上报]
G -- 否 --> I[视为有效]

六、架构层：Service Worker 与现代语义化方案协同

在 PWA 场景中，可注册 SW 拦截所有图片请求：

// service-worker.js
self.addEventListener('fetch', event => {
  if (event.request.destination === 'image') {
    event.respondWith(
      fetch(event.request).then(res => {
        if (res.status >= 400 || res.headers.get('content-length') === '0') {
          return new Response(PLACEHOLDER_GIF, { 
            headers: { 'content-type': 'image/gif' } 
          });
        }
        return res;
      })
    );
  }
});

同时，渐进增强采用 <picture> + <source fallback>（Chrome 122+ 支持）或自定义 <img-fallback> Web Component 封装语义化降级逻辑。

七、工程层：可观测性与错误归因体系

构建图片加载健康度看板需采集以下维度：

• 原始 onerror 触发率（基线）
• naturalWidth === 0 但未触发 onerror 的比例（暴露 CORS/CDN 伪装问题）
• AbortController 超时占比（反映网络质量或服务端卡顿）
• fallback 启用后用户停留时长变化（业务影响评估）

八、演进层：从防御到声明——HTML 标准的未来解法

WHATWG 正推进 HTML PR #9525，引入 <img fallback="placeholder.jpg"> 原生属性。当前 Polyfill 方案已可在主流框架中复用：

class ImgFallback extends HTMLElement {
  connectedCallback() {
    const img = this.querySelector('img');
    const fallback = this.getAttribute('fallback');
    const controller = new AbortController();
    setTimeout(() => !img.complete && img.naturalWidth === 0 && 
      (img.src = fallback), 3000);
  }
}

注册后即可使用：<img-fallback fallback="/img/404.png"><img src="xxx.jpg"></img-fallback>。

```