onerror在img循环加载时经常失效，因其为一次性事件监听器且部分浏览器对空src或非法URL不触发；需每次更新src前清除并重绑监听器，并用{once:true}避免重复触发和内存泄漏。
onerror 在 img 标签循环加载时为什么经常失效
因为 onerror 是一次性事件监听器：一旦触发并执行，它不会自动重置；后续同一张图片再次加载失败（比如在无限滚动中反复复用、src 重新赋值），onerror 不会再次触发——除非你手动重绑或清空再设。
更隐蔽的问题是：如果图片 src 是空字符串、"#" 或非法 URL（如 "javascript:void(0)"），部分浏览器（尤其是 Safari）根本不会触发 onerror，连第一次都不行。
- 确保
src是合法非空 URL，避免src=""或src="#" - 不要依赖内联
onerror="this.src='fallback.jpg'"做多次兜底——它只生效一次 - 在无限滚动中，图片元素常被复用（例如 Vue 的
v-for+ key 复用、React 的列表渲染），需主动管理错误状态
用 addEventListener 替代内联 onerror 实现可重入
把错误处理逻辑从 HTML 属性移到 JS 中，并在每次更新 src 前先移除旧监听器、再添加新监听器，才能保证每次加载都受控。
function loadImage(img, src) {
img.onerror = null; // 先清除可能残留的监听器
img.addEventListener('error', () => {
img.src = '/images/placeholder.webp';
}, { once: true }); // 用 { once: true } 避免内存泄漏
img.src = src;
}
注意：{ once: true } 很关键——它让监听器自动卸载，既安全又省心。别用 removeEventListener 手动清理，容易因引用不一致而失败。
立即学习“前端免费学习笔记（深入）”；
- 必须在赋值
img.src之前 绑定error监听器，否则可能错过同步错误（如 src 为无效 data URL） - 如果用
loading="lazy"，Safari 对 lazy 图片的error支持不稳定，建议降级时禁用 lazy 或 fallback 后显式调用img.loading = 'eager'
服务端返回 404 但前端没触发 onerror 怎么办
这不是前端 bug，而是浏览器行为：当图片请求返回 404 但响应体包含有效图像数据（比如某些 CDN 返回「404 页面截图」作为图片），浏览器会当成加载成功，不触发 error。真正触发 error 的是网络失败、MIME 类型不匹配、解码失败等。
这时得靠服务端配合或客户端预检：
- 后端图片接口统一返回标准 404 + 空响应体，或返回明确的占位图（而非 HTML 页面）
- 前端可加一层 fetch 预检（仅对关键图片）：
fetch(src, { method: 'HEAD' })，但注意 CORS 和跨域限制 - 更实用的是：在图片加载完成后，用
img.naturalWidth === 0做二次校验（适用于已渲染但内容为空的情况）
React/Vue 列表中如何安全复用 img 元素
框架列表渲染时，img 元素可能被复用（DOM 节点保留，仅更新 props）。此时若上一条数据的图片加载失败过，onerror 已被触发并执行过 fallback，但新 src 再次失败时不会重试——因为监听器没重装。
解决方案是：在组件更新时强制“重置”图片状态：
// React 示例：useEffect 中处理
useEffect(() => {
if (!src) return;
const img = imgRef.current;
if (!img) return;
img.onerror = null;
img.addEventListener('error', handleFallback, { once: true });
img.src = src;
}, [src]);
Vue 类似，放在 watch 或 updated 钩子中做相同操作。关键是每次 src 变化都视为一次全新加载，不信任任何残留状态。
容易被忽略的一点：如果 fallback 图也加载失败，img.src = fallbackUrl 会再次触发 error，形成死循环。务必在 handleFallback 中加守卫，比如记录是否已 fallback 过，或 fallback 后直接 img.onerror = null。
