onerror="this.src='fallback.png'; this.onerror=null"是唯一可靠写法，因备用图404会触发无限循环导致卡死；必须紧接赋值后切断事件，分号与顺序不可省略或颠倒。
onerror="this.src='fallback.png'" 为什么一用就卡死
因为备用图本身也 404 时，浏览器会再次触发 onerror，形成无限递归：加载失败 → 执行 this.src='fallback.png' → fallback.png 加载失败 → 再次进入 onerror → ……内存暴涨、标签页无响应甚至 DevTools 崩溃都是真实发生过的现象。
这不是“写法不够优雅”的问题，而是硬性行为约束：this.onerror=null 必须紧接在 this.src=... 之后，且不能省略分号。顺序颠倒或漏写都会失效。
-
onerror="this.src='fallback.png'; this.onerror=null"是唯一可靠的基础写法 - 更稳妥的变体是加路径判别：
onerror="if (!this.src.includes('fallback')) { this.src='fallback.png'; this.onerror=null; }"，防止 fallback 图路径本身被误写成循环引用 - 若 fallback 图路径不可信（比如部署后路径错位），直接改用 base64 内联图：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null"
动态创建的 ![]()
动态插入的图片如果在 appendChild() 之后才绑定 onerror，首次加载失败事件已经错过，onerror 永远不会触发——这是最常被忽略的时机问题。
必须在元素创建后、插入 DOM 前完成绑定。用 addEventListener 更可控，也避免内联字符串拼接风险。
- 错误做法：
const img = document.createElement('img'); img.src = '/avatar.jpg'; container.appendChild(img); img.onerror = handler;（事件已丢失） - 正确做法：
const img = document.createElement('img'); img.src = '/avatar.jpg'; img.addEventListener('error', handler); container.appendChild(img); - 若需防重复降级，用
dataset标记：img.addEventListener('error', e => { if (!e.target.dataset.fallbacked) { e.target.src = '/placeholder.svg'; e.target.dataset.fallbacked = 'true'; } });
什么情况下 onerror 根本不触发，却误以为“兜底失效”
onerror 只响应“请求发出后失败”，不是所有“图片没显示”的情况它都管。大量调试失败源于误判触发条件。
-
src=""、src=" "、src="javascript:void(0)"：浏览器根本不发请求，onerror不触发 - CORS 阻塞（如外链图床未配
crossorigin）：控制台报Blocked by CORS policy，但onerror不触发 - 服务器返回 200 + 占位图（例如 CDN 对 404 自动返回兜底图）：请求成功，不算“加载失败”，
onerror不触发 - 本地开发时双击打开 HTML 文件（
file://协议）：90% 的“失败”实为浏览器主动拦截，与代码无关
遇到“onerror 不执行”，先检查控制台 Network 面板：有没有发出请求？状态码是多少？是否跨域？别急着改 JS。
为什么 fallback 图还是 404？路径问题才是最大隐形杀手
80% 的“onerror 失效”根本不在事件逻辑，而在 src 路径本身错了——相对路径拼错、大小写不一致、部署后路径映射缺失，都会让 fallback 图无法加载，进而触发死循环。
绝对路径和 base64 是绕过这类问题最直接的方式，但要注意它们的适用边界。
- 静态资源统一用绝对路径：
src="/img/logo.png"，而非./img/logo.png或../assets/logo.png - 开发阶段禁用双击打开 HTML，必须用 Live Server（如 VS Code 的 Ritwick Dey 插件）启动本地服务
- 服务端返回的占位图（如
/img/missing.png?text=404）需确保 Nginx/Apache 显式配置该路径 fallback，不能依赖前端补救 - 关键图片（头图、按钮图标）的
src必须指向高可用地址，不能是相对路径或空值；SSR 渲染时也要确保该 URL 在服务端可命中
真正棘手的不是怎么写 onerror，而是怎么让 fallback 图第一次就加载成功——路径可靠性、协议兼容性、服务端配合，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
