onerror一写就卡死是因为备用图404会反复触发事件形成无限循环，必须写成onerror="this.src='/img/placeholder.svg'; this.onerror=null;"并用绝对路径或base64确保可达。
直接写 onerror="this.src='fallback.png'" 必定陷入无限循环——备用图再 404，事件会反复触发，内存暴涨，标签页卡死或崩溃。必须切断事件链，且不能依赖“看起来能用”。
为什么 onerror 一写就卡死？
浏览器对 onerror 的执行没有内置防重机制。只要新 src 加载失败（比如 /fallback.png 实际也 404），就会再次进入同一个 onerror 回调，形成死循环。这不是代码语法错误，而是逻辑闭环缺失。
- 错误写法：
onerror="this.src='fallback.png'"—— 没有终止条件，备用图失败即崩 - 正确前提：每次替换
src后，必须立刻让该元素失去再次触发onerror的能力 - 控制台可能不报错，但内存占用飙升、页面无响应，这是典型循环征兆
解除循环的硬性写法
唯一可靠写法是赋值 + 立即解绑，顺序不可颠倒，分号不可省略：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
@@##@@
-
this.onerror=null必须紧接在this.src=...之后，中间不能换行或加其他语句 - 路径必须是绝对路径（以
/开头）或 base64 data URL，避免因 base URL 解析错乱导致二次失败 - 推荐用 SVG 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==，彻底规避路径和 MIME 风险
动态插入的 img 怎么安全绑定？
通过 document.createElement('img') 创建后，再补 onerror 绑定大概率失效——DOM 插入瞬间已触发加载失败，事件监听来不及注册。
- 必须在
appendChild()前完成绑定：img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; - 全局捕获更稳妥（尤其 SPA 场景）：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/svg+xml;base64,...'; } }, true); -
true表示捕获阶段监听，能覆盖所有后续动态插入的<img src="real.jpg" onerror="this.src='/img/placeholder.svg'; this.onerror=null;">
哪些情况 onerror 根本不触发？别指望它兜底
onerror 只响应网络层失败（HTTP 状态码非 2xx），对以下真实场景完全静默：
-
src为空字符串、undefined或纯空格 → 浏览器根本不发请求 - CORS 阻塞（跨域图片没设
crossorigin）→ 控制台报错，但onerror不进 - 服务器返回 200 状态码的兜底页（如 CDN 的 “图片不存在” 占位图）→ 浏览器视为成功
- 图片文件头正常但数据损坏（JPEG 数据块坏）→ 需靠
img.naturalWidth === 0手动检测
这些情况必须靠其他手段：预设 src 为可用占位图、服务端统一 fallback 响应、或用 <picture></picture> 配多格式降级。真正的容错不是靠一个 onerror，而是分层控制加载行为、状态标记与路径隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
