onerror未触发是因为它仅响应真实网络请求失败（如404/403），对空src、cors拦截、200状态兜底页、数据损坏等场景完全沉默；需用network面板验证实际请求状态，而非仅依赖控制台报错。
onerror 为什么写了却没触发
浏览器只在真实网络请求失败（比如 HTTP 404、403、连接中断）时才触发 onerror，以下情况它完全沉默：
-
src是空字符串或纯空格 —— 浏览器压根不发请求 - 路径写错但服务器返回 200（例如 CDN 的兜底页）—— 浏览器认为“成功加载”，哪怕内容是 HTML 文本
- CORS 阻止跨域图片加载 —— 控制台报
Access to image at 'xxx' from origin 'yyy' has been blocked，但onerror不进 - 图片文件头正常但数据损坏（如 JPEG 块断裂）——
naturalWidth === 0可检测，但需额外 JS 判断
验证是否真失败：打开 DevTools → Network → 过滤 img，看请求状态码和响应内容。别只盯着控制台有没有报错。
怎么写 onerror 才不卡死页面
onerror="this.src='fallback.png'" 看似简单，一旦 fallback.png 也 404，就会无限循环触发，内存暴涨甚至崩溃。
必须立即切断事件绑定，并加防重判断：
- 内联写法（静态 HTML）：
onerror="if (!this.src.includes('fallback')) { this.src = 'fallback.png'; this.onerror = null; }" - 更稳妥的 base64 兜底：
onerror="this.src='data:image/png;base64,iVBORw0KGgo...'; this.onerror=null" - 动态创建的
<img>元素：必须在appendChild()前设置img.onerror = handler，否则可能来不及绑定就已报错
动态插入图片如何统一处理
全局监听比每个元素手动绑更可靠，尤其适合 Vue/React 渲染或 AJAX 加载的图片：
- 用捕获阶段监听：
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) - 注意：
error事件本身不冒泡，但捕获阶段仍能命中刚插入的元素 - 务必检查
e.target.tagName === 'IMG'，避免误处理<script></script>或<link>的错误
这种写法对懒加载图片、瀑布流、分页加载等场景天然友好。
路径错误才是最大隐形杀手
80% 的“图片不显示”根本不是代码逻辑问题，而是路径错了 —— 尤其在本地双击打开 HTML 文件（file:// 协议）时，绝对路径 /img/logo.png 会去磁盘根目录找，不是项目根目录。
- 开发阶段：用 VS Code 拖拽图片生成相对路径（如
./assets/logo.png），避免手敲 - 上线前：确保 Web 服务器把
/static/映射到真实目录，再统一用以/开头的绝对路径 - 永远打开 Network 面板确认实际请求 URL，别信“路径看着对”
真正难处理的不是第一次 fallback，而是 fallback 图也挂了之后要不要再 fallback、要不要上报、要不要降级为文字 alt —— 这些边界逻辑线上一出问题就是静默白屏，没人知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
