应使用标记位（如 dataset.errorHandled）防止 onerror 无限循环，仅首次失败时切换 fallback 图片；推荐 addEventListener 绑定并配合 data URL 兜底，确保资源失效时仍可展示占位图。
onerror 事件触发后如何避免无限循环
直接在 onerror 里写 this.src = 'fallback.jpg' 是最常见写法，但一旦 fallback 图片也加载失败，就会再次触发 onerror，形成死循环——浏览器可能卡顿，控制台反复报 GET fallback.jpg 404。
关键不是“要不要换图”，而是“换过一次就别再试了”。实操中建议用一个标记位控制重试次数：
@@##@@
handleImageError 函数里必须做两件事：检查是否已尝试过 fallback；只在未尝试时才赋新 src：
- 用
dataset.loaded或data-*属性标记状态，比如el.dataset.attempted = 'true' - 赋值前加判断：
if (!el.dataset.attempted) { el.src = 'fallback.jpg'; el.dataset.attempted = 'true'; } - 不推荐用全局变量或闭包计数，图片多时状态难同步，且 SSR 或动态插入场景下易失效
用函数封装时如何传参并保持 this 指向
写成 onerror="handleImageError(this, 'backup.png')" 看似直观，但实际执行时 this 在内联事件处理器中就是当前 
推荐封装为纯函数，接收元素和可选 fallback 路径，并内部处理状态：
function handleImageError(el, fallback = '/images/placeholder.svg') {
if (el.dataset.errorHandled) return;
el.dataset.errorHandled = 'true';
el.src = fallback;
}
这样调用简洁安全：onerror="handleImageError(this)"。若需差异化 fallback，可传入：onerror="handleImageError(this, '/icons/user-default.png')"。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
现代写法：用 addEventListener 替代 onerror 属性
内联 onerror 属性不易复用、难测试、破坏 HTML 与 JS 关注点分离。真实项目中应优先用 addEventListener 绑定，尤其当图片是 JS 动态创建或批量渲染时。
注意两点：
-
error事件不会冒泡，所以不能委托到父容器，必须逐个绑定或用 MutationObserver 监听新增图片 - 绑定前需检查图片是否已加载失败（比如 DOM 加载完但图片资源已 404），可用
el.complete && !el.naturalWidth判断 - 示例：
img.addEventListener('error', () => handleImageError(img, fallback))，注意不要漏掉箭头函数或 bind，否则this不指向元素
fallback 图片本身出错怎么办
就算加了防重入逻辑，如果 fallback.jpg 也 404，用户看到的还是空白或浏览器默认破损图标。这不是代码问题，而是资源治理问题。
务实做法分三层：
- 兜底用 data URL 内联极简占位图（如 1×1 透明 gif），确保 100% 可加载：
el.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' - 对重要图片（如用户头像、商品主图），fallback 路径应走 CDN 且带版本号或哈希，避免缓存导致旧路径失效
- 服务端可配合返回
HTTP 410 Gone或重定向到兜底图，比前端硬编码更可控
真正难的从来不是写几行 JS，而是 fallback 链路里哪一环该由谁负责——前端能拦住无限循环，但拦不住运维删错了静态资源目录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
