onerror触发后无限循环卡死页面最典型症状是页面卡顿、内存飙升，甚至弹出stack overflow at line: 0；根源是备用图也404导致反复触发，必须立即设this.onerror=null切断绑定，且需排查路径大小写、跨域、空src等onerror不触发的场景。
onerror 触发后无限循环卡死页面
最典型症状是页面卡顿、内存飙升，甚至弹出 Stack overflow at line: 0。这不是浏览器 bug，而是备用图也 404 后反复触发 onerror，形成死循环。
-
onerror="this.src='fallback.jpg'"必须立刻加this.onerror=null切断事件绑定 - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) { this.src = 'fallback.jpg'; this.onerror = null; }" - 动态创建的
<img>元素，必须在插入 DOM 前手动赋值onerror，否则可能来不及绑定就已报错
onerror 根本不触发的常见场景
别一上来就改 JS——很多“图片不显示”根本不是 onerror 能管的。它只响应真实网络请求失败（404/403/500），对以下情况完全沉默：
-
src是空字符串或纯空格：浏览器压根不发请求，没错误可报 - 跨域图片没配
crossorigin：控制台报Blocked by CORS policy，但onerror不触发 - 服务器返回 200 状态码的兜底图（如某些 CDN 的“图片不存在”占位页）：浏览器认为“加载成功”
- 图片文件头正常但数据损坏（如 JPEG 数据块坏）：
naturalWidth === 0可检测，但需额外 JS 判断
本地双击打开 HTML 时图片全白屏
这不是路径写错了，是浏览器主动拦截——file:// 协议下，JS、CSS、图片请求全被拦，控制台报 net::ERR_FILE_NOT_FOUND 或 Access to script at 'file:///xxx.js' from origin 'null' has been blocked。
- VS Code 装
ritwickdey.LiveServer插件，右键选Open with Live Server - 确保文件已保存且扩展名是小写
.html - 临时调试可 Chrome 启动加
--allow-file-access-from-files，但新版已逐步废弃，别依赖
fallback 图片也挂了怎么办
真正难处理的不是“换一张图”，而是换完之后要不要再换——比如默认图本身又 404，是否该 fallback 到 base64？是否要记录失败次数？是否上报监控？这些边界常被跳过，线上一出问题就是静默白屏。
- 推荐兜底用
data:image/png;base64,iVBORw0KGgo...，体积小、无网络依赖、天然可靠 - 全局监听更健壮：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/png;base64,...'; } }, true) - 路径写错才是最大“隐形杀手”：80% 的问题根源是大小写错误、相对路径解析错、或 Linux 服务器上
Img.jpg和img.jpg被当成两个文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
