onerror一写就无限循环，是因为备用图也404时会反复触发：原图失败→换src→备用图再失败→再次触发onerror。必须写成this.src='fallback.svg'; this.onerror=null;并确保fallback路径绝对可靠或改用base64内联。
onerror 为什么一写就无限循环
头像加载失败后，onerror 触发换图，但新 src（比如 "default-avatar.png"）也 404，浏览器会再次触发 onerror，形成递归。这不是逻辑错误，而是浏览器对“资源加载失败”的忠实响应——它不区分是原图还是 fallback 图失败。
常见诱因包括：fallback 图路径拼错（如 ./img/ 在子目录页面下解析失效）、本地双击打开 HTML（file:// 协议拦截所有相对路径）、CDN 路径未同步、或服务器返回 404 时没配 fallback 响应。
-
this.onerror = null必须紧跟在this.src = '...'后面，且用分号隔开；顺序颠倒或漏写都会失效 - 绝对路径优先：
src="/assets/avatar-fallback.svg"比src="avatar-fallback.svg"更可靠 - 推荐 fallback 图用内联 SVG：
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="，彻底绕过网络请求和路径解析
动态插入的头像怎么安全绑定 onerror
用 document.createElement('img') 创建后才加 onerror，大概率来不及——DOM 插入瞬间加载失败已发生，事件直接丢失。
必须在插入前完成绑定，且避免内联字符串拼接（易 XSS 或引号冲突）：
立即学习“前端免费学习笔记（深入）”；
- 直接赋值函数：
img.onerror = () => { img.src = '/assets/fallback.svg'; img.onerror = null; }; - 或统一用捕获阶段全局监听：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.fallbacked) { e.target.dataset.fallbacked = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true); - 动态头像建议提前预加载 fallback：
new Image().src = '/assets/fallback.svg';，避免首次 fallback 出现空白延迟
为什么加了 onerror 还是显示裂图图标
因为 onerror 只控制“换源”，不控制“视觉呈现”。浏览器默认会在加载失败时短暂显示断裂图标（broken image icon），直到新 src 加载完成——如果 fallback 是网络图，这段空白或闪烁仍存在。
- 最稳方案：用 CSS 隐藏初始状态，再显式切换 —— 给头像容器加
style="background: #eee url(/assets/fallback.svg) center/cover no-repeat;"，图片正常加载时覆盖背景；失败时背景自然兜底，无闪烁 - 若必须用
<img>标签，可配合img:error伪类隐藏（仅部分浏览器支持），或 JS 中先设img.style.visibility = 'hidden'，加载成功后再设回'visible' - 注意：
alt文字不会自动替代裂图图标，它只在无障碍场景中被读出；两者职责分离，不可互相替代
服务端渲染头像时 onerror 失效怎么办
SSR 输出的 HTML 若只带空 src 或占位图（如 src="/placeholder.jpg"），而真实头像地址靠 JS 注入，那 onerror 在首屏根本没机会触发——因为初始 src 是能加载的（哪怕只是个占位图）。
- 关键原则：首屏头像的
src必须指向真实可用地址，不能是“占位图 + JS 替换”模式 - 正确做法：服务端根据用户 ID 直接生成真实头像 URL（如
https://cdn.example.com/avatar/12345.jpg），并带上内联onerror；fallback 图也走 CDN，确保高可用 - 若头像来源不稳定（如第三方图床），应在服务端做一层代理：请求头像时，失败则返回标准 fallback SVG，HTTP 状态码仍为 200，这样浏览器不会触发
onerror，但用户看到的始终是可用图像
