onerror卡死是因未切断事件链，必须用this.onerror=null或dataset标记防递归；正确写法仅两种：内联SVG+置空onerror，或dataset状态标记；动态创建图片需在appendChild前绑定，SSR须服务端输出完整onerror属性。
onerror 一写就卡死，根本不是 bug，是没切断事件链——必须加 this.onerror = null 或用 dataset 打标，否则备用图再失败，会无限触发自身。
为什么 onerror="this.src='fallback.png'" 会让页面卡住
浏览器加载 fallback.png 失败时，onerror 会再次触发，形成递归调用。主线程持续尝试加载、失败、再加载……内存暴涨，标签页无响应，甚至整个浏览器卡顿。这不是“偶尔出问题”，而是只要 fallback 路径不可达，100% 触发。
- 本地双击打开 HTML 文件时，
/img/xxx.png会被解析成系统根目录，90% 的“失败”其实源于 file:// 协议拦截 - 相对路径如
./fallback.jpg在不同路由层级下容易 404，尤其 SSR 或前端路由场景 - CDN 返回 404 或 CORS 阻塞时，
onerror确实会触发，但 fallback 图若也受限，立刻进入死循环
onerror 正确写法只有两种可靠模式
所有其他变体都存在漏判或重入风险。必须选其一，且不能省略关键部分。
-
基础写法（推荐用于静态 HTML）：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='; this.onerror=null;"—— 内联 SVG 彻底规避路径和跨域问题，this.onerror=null必须紧接在赋值后，分号不能少 -
防重入写法（推荐用于动态插入的
<img alt="HTML中onerror引发页面循环卡顿怎么办？解除死循环优化教程" >）：onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = '/img/placeholder.svg'; }"—— 用dataset标记状态，比onerror=null更健壮，避免多次绑定导致的竞态
动态创建的 <img alt="HTML中onerror引发页面循环卡顿怎么办？解除死循环优化教程" > 元素 onerror 绑定时机很关键
如果先 appendChild() 再绑定事件，首次加载失败已发生，onerror 根本不会执行——DOM 解析完就发请求了，事件监听器还没挂上。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须在
document.body.appendChild(img)之前完成绑定：img.onerror = () => { ... }或直接设置img.setAttribute('onerror', '...') - React/Vue 等框架中，不要依赖 useEffect/mounted 后再处理；应在 JSX/模板里直接写
onError属性，确保编译后是原生onerror属性 - 服务端渲染（SSR）输出的 HTML 中，
<img alt="HTML中onerror引发页面循环卡顿怎么办？解除死循环优化教程" >标签必须带完整onerror属性，不能指望 JS 初始化后再补
alt 和 onerror 不是一回事，别混着用
alt 是语义与可访问性层，onerror 是资源加载控制层。一个失效不影响另一个运行，但两个都缺，用户看到的就是断裂图标 + 无描述。
-
onerror不响应 CORS 拦截、MIME 类型错误（如 WebP 在旧 Safari）、服务端返回 200 的兜底页——这些场景下它根本不会触发，此时只有alt能提供文字提示 -
alt=""表示纯装饰，读屏器跳过；alt缺失则可能被读出src路径，造成干扰 - ESLint 等工具会强制要求
alt存在（jsx-a11y/alt-text），但不会检查onerror是否闭环——这个责任完全在开发者
真正难的不是写对那一行 onerror，而是意识到：图片加载失败从来不是孤立事件，它暴露的是路径管理、部署协议、资源可用性、可访问性设计的整条链路问题。随便贴个 default.png 还不如不写。
