onerror="this.src='fallback.jpg'"卡死是因为备用图404导致无限循环，必须写成onerror="this.src='/img/placeholder.svg'; this.onerror=null;"，且路径须为绝对路径或base64。
onerror="this.src='fallback.jpg'" 为什么一用就卡死
这不是写法错了，是逻辑断点缺失。浏览器对 onerror 的响应是“只要加载失败就触发”，而你把新 src 指向一个同样不可访问的路径（比如拼错、404、跨域被拦），它会立刻再次失败 → 再次触发 → 无限循环。内存飙升、DevTools 崩溃、页面无响应都是真实后果。
必须在赋值新 src 的**同一行语句里**切断事件绑定，顺序不能颠倒：
onerror="this.src='/img/placeholder.svg'; this.onerror=null;"
-
this.onerror=null必须紧接在this.src=...后面，中间不能换行或缺分号 - 路径推荐用绝对路径（如
/img/...）或 base64（如data:image/svg+xml;base64,...），避免相对路径因 base URL 解析出错导致二次 404 - 优先用
.svg占位图：体积小、无解码失败风险、天然透明背景
动态插入的 <img> 怎么安全绑定 onerror
用 document.createElement('img') 创建后，再 .appendChild()，最后补 .onerror = ... —— 这种写法大概率失效。因为图片加载错误可能在元素插入 DOM 的瞬间就已发生，事件监听还没挂上就错过了。
稳妥做法只有两种：
- 创建时立即赋值：
const img = document.createElement('img'); img.onerror = () => { img.src = '/fallback.svg'; img.onerror = null; }; - 用全局捕获监听（兼容所有后续动态插入）：
document.addEventListener('error', e => { if (e.target instanceof HTMLImageElement && !e.target.dataset.handled) { e.target.dataset.handled = 'true'; e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibGlnaHRncmV5Ii8+PC9zdmc+'; } }, true);注意第三个参数true表示捕获阶段，确保能抢在冒泡前拦截
什么情况下 onerror 根本不触发
很多人反复检查代码却看不到 fallback 效果，不是没写对，而是根本没进到错误流程。以下情况 onerror 静默失效：
-
src为空：src=""或src=" "→ 浏览器不发请求，不触发 - CORS 阻塞：外链图床未配
crossorigin，控制台报Blocked by CORS policy，但onerror不触发 - 服务端返回 200 状态码但响应体无效：比如 CDN 对 404 自动返回 HTML 错误页、或返回空响应 → 请求“成功”，不算加载失败
- 图片文件头正常但数据损坏（如 JPEG 截断）：部分浏览器触发，部分不触发，行为不统一
验证方式：打开 DevTools → Network → 找对应图片请求，看 Status 和 Response 标签页内容，别只信控制台有没有报错。
<picture></picture> 里 onerror 失效怎么办
<picture></picture> 的降级逻辑和单个 <img> 不同：<source></source> 加载失败不会触发自己的 onerror（它没这个属性），只有最终选中的那个 <img> 的 src 失败才会走 onerror。
所以关键点只有一个：确保 <picture></picture> 末尾的 <img> 元素本身有可靠 onerror，且它的 src 是兜底路径（不能是另一个可能失败的格式）：
<picture><source type="image/avif" srcset="icon.avif"><source type="image/webp" srcset="icon.webp"> @@##@@ </source></source></picture>
如果这个兜底 <img src="icon.png" onerror="this.src='/img/placeholder.svg'; this.onerror=null;" alt="Icon"> 也 404，那就只剩 alt 文本——onerror 不会向上穿透到 <source></source>，也没法替它们换源。
真正容易被忽略的是：所有降级路径都必须闭环。不是“写了 onerror 就算兜底”，而是“每一张备用图都得自己扛住加载失败”。否则一个环节断掉，整个链路就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
