onerror重定向死循环因备用图再次失败导致，必须在赋值src后立即执行this.onerror=null，且备用图路径须100%可达；动态创建img需先绑定onerror再设src最后插入DOM。
onerror 重定向死循环不是代码写错了，而是备用图又失败了，必须在赋值后立刻执行 this.onerror=null，且备用图路径本身得 100% 可达。
为什么 onerror="this.src='fallback.png'" 会卡死
浏览器对图片加载失败的处理是“发请求 → 失败 → 触发 onerror → 换 src → 再发请求”。如果 fallback.png 也返回 404、被 CORS 阻断、或服务器返回了兜底 HTML 页面（比如 Nginx 的 404.html），就会再次触发同一个 onerror，形成无限递归。
这种卡死不报错，只表现为页面假死、CPU 占满、DevTools 响应迟缓甚至崩溃。它和 JS 语法无关，只取决于新 src 是否真能返回一张可解码图像。
-
onerror不是“试一次就停”，只要新地址加载失败，它就继续进 - 相对路径（如
./fallback.png）在不同 base URL 下极易解析成 404 - CDN 地址失效、权限变更、file:// 协议下跨域拦截，都会让备用图不可达
必须写的两行：this.src=... 后紧接 this.onerror=null
顺序和写法都不能错：赋值必须在前，this.onerror=null 必须在同一语句中、分号后立即执行。任何异步、条件分支、函数调用包裹，都可能让切断失效。
- ✅ 正确：
onerror="this.src='/img/placeholder.svg'; this.onerror=null;" - ❌ 错误：
onerror="this.src='fallback.png'"（没切断，必循环） - ❌ 错误：
onerror="handleError(this)"（函数内设null不保证this绑定） - ❌ 错误：
onerror="this.onerror=null; this.src='fallback.png'"（顺序反了，赋值前就清空了）
推荐直接用绝对路径或 base64 SVG，彻底绕过网络请求环节：data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi...
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
动态创建的 ![]()
JS 动态插入时，onerror 属性写法基本无效——因为图片可能在 appendChild() 瞬间就开始加载并失败，而事件监听器还没挂上。
- 必须先绑定事件，再设置
src，最后插入 DOM - ✅ 正确顺序：
const img = new Image(); img.onerror = handler; img.src = url; container.appendChild(img); - handler 内第一行就得写
event.target.onerror = null或img.onerror = null，否则替换后仍可能再次触发 - 避免用匿名函数：
img.addEventListener('error', () => {...})，无法移除，容易重复执行 - 若需多级降级（如 CDN → 本地 → SVG），建议用
dataset打标，比如if (!this.dataset.retry)控制次数
哪些情况 onerror 根本不会触发，别白忙活
很多人反复检查代码却没效果，是因为压根没走到 onerror 逻辑里。它只响应“请求发出后失败”，以下场景完全静默：
-
src是空字符串、undefined或纯空格 —— 浏览器根本不发请求 - CORS 阻塞（如外链图床没配
crossorigin）—— 控制台报错，但onerror不触发 - 服务器返回 200 状态码的兜底页（比如某些 CDN 对 404 自动返回 HTML）—— 浏览器认为“成功”
- 图片文件头正常但数据损坏（如截断 JPEG）—— 行为不统一，部分浏览器不触发
真正要盯住的，永远是原始 src 和备用图路径在目标环境（本地开发 / CDN / file://）下是否真实可访问——别的都是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
