onerror 一换图卡死是因 fallback 图失败触发无限循环，必须写为 onerror="this.onerror=null; this.src='/static/placeholder.svg'" 并优先用内联 svg 避路径风险。
onerror 为什么一换图就卡死
直接写 onerror="this.src='fallback.jpg'" 是最常见也最危险的写法。一旦 fallback.jpg 本身也 404 或跨域失败，浏览器会再次触发 onerror，形成无限循环——内存飙升、标签页无响应甚至崩溃。这不是“偶尔出错”，而是设计缺陷导致的确定性故障。
必须在换图前清空事件处理器
this.onerror = null 不是可选项，是硬性安全边界。它确保降级只执行一次，哪怕备用图再失败，也不会重入回调。
- 正确写法：
onerror="this.onerror=null; this.src='/static/placeholder.svg'" - 推荐用内联 SVG 占位图，比如
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径风险 - 避免在内联中调用未声明函数，如
onerror="fallback()"—— 若fallback未定义，整个事件静默失效，连错误日志都没有
动态插入的 img 元素怎么绑 onerror
用 document.createElement('img') 创建后，onerror 必须在 appendChild() 前绑定；否则图片首次加载失败时，事件监听器还没挂上，就直接漏掉了。
- 错误顺序：
el.appendChild(img); img.onerror = handler;→ 事件丢失 - 正确顺序：
img.onerror = handler; el.appendChild(img); - 更稳妥的做法：改用
addEventListener('error', handler, { once: true })，天然防重复
哪些情况 onerror 根本不触发
很多人误以为 onerror 是“万能兜底”，其实它只响应“请求发出后失败”这一窄场景：
- 空
src或src="undefined"→ 不触发 - CORS 阻塞（跨域且没配
crossorigin）→ 触发但错误信息被抹成Script error.，无法定位 - 服务器返回 200 状态码但内容是 HTML 错误页（如 Nginx 404 页面）→ 不触发，因为 HTTP 层没失败
-
srcset或sizes复杂逻辑下，onerror只响应最终选中的那个 URL，不感知切换过程
真正容易被忽略的是：你写的降级路径本身是否稳定——如果它依赖 CDN、带查询参数、或拼写为相对路径 ./fallback.png，在某些部署环境里就是不可靠的。别假设“它应该能加载”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
