缩略图 fallback 应首选 data:image/svg+xml;base64 内联 SVG 占位图，零请求、零路径风险、体积小、立即渲染；次选绝对路径 CDN 托管 SVG；禁用 PNG/JPEG。
onerror 为什么一换图就无限重试
缩略图（比如 thumb.jpg）加载失败后，onerror 触发并执行 this.src = 'fallback.jpg'，但如果 fallback.jpg 本身也 404 或路径错误，浏览器会再次触发 onerror，形成循环。这不是“逻辑没写对”，而是事件处理器没被清除，导致每次失败都重新进入同一段代码。
-
this.onerror = null必须紧接在this.src = ...后面，且用分号隔开，顺序不能颠倒 - 内联写法中不能只写
onerror="this.src='fallback.jpg'"，缺了this.onerror=null就等于没防循环 - 备用图不能依赖相对路径（如
./img/missing.png），本地双击打开或 CDN 故障时极易二次失败
缩略图 fallback 图该用什么格式最稳
缩略图通常尺寸小、语义轻，但对可用性要求高——它常出现在列表页、卡片流等首屏密集区域，一旦白屏或卡顿，体验断层明显。此时 fallback 图的核心诉求是：零请求、零路径解析、体积小、可立即渲染。
- 首选
data:image/svg+xml;base64,内联 SVG 占位图（如 1×1 灰块或带文字的 placeholder），彻底规避 HTTP 请求和路径风险 - 次选绝对路径的 CDN 托管图（如
/assets/thumb-placeholder.svg），需确保该路径在 Nginx / CDN 配置中真实存在且匿名可访问 - 避免使用 PNG/JPEG 作为 fallback —— 它们体积大、解码慢，且仍可能因 MIME 类型或损坏数据导致
naturalWidth === 0而视觉失效
动态插入的缩略图 onerror 绑定时机很关键
通过 document.createElement('img') 创建缩略图后，再 appendChild()，如果这时才绑定 onerror，大概率来不及：图片资源已在 DOM 插入瞬间发起请求，失败事件早已触发并丢失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须在
appendChild()前完成绑定：img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; - 若批量插入（如 Vue/React 列表渲染），推荐全局捕获：
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 alt="HTML缩略图替换触发onerror循环如何避免" > - 服务端渲染（SSR）场景下，首屏缩略图的
src应直接指向一个高可用地址（如占位图），而非留空或依赖 JS 注入
缩略图 onerror 不触发的常见静默场景
很多开发者反复检查 onerror 写法，却始终看不到 fallback 效果，其实是因为事件根本没触发——onerror 只响应网络层失败（HTTP 状态非 2xx），对以下情况完全静默：
立即学习“前端免费学习笔记（深入）”；
-
src为空字符串、纯空格或undefined→ 浏览器不发请求，无事件 - 跨域图片未加
crossorigin属性 → 控制台报 CORS 错误，但onerror不触发 - 服务器返回 200 状态码的兜底页（如某些图床的 “not found” HTML 页面）→ 浏览器视为成功加载
- 图片文件头正常但数据损坏（如截断的 JPEG）→
img.naturalWidth为 0，但onerror不会自动触发
这些情况无法靠 onerror 拦截，得配合其他手段：预加载 fallback 图、用 IntersectionObserver 延迟加载前先占位、或服务端统一返回语义化占位响应。缩略图的健壮性，从来不是单靠一个 onerror 就能兜住的。
