onerror 是唯一能在 加载失败时触发并执行 JS 的原生属性，用它切换 src 是最直接、兼容性最好的降级方案；alt 仅提供文本替代，不触发加载行为，无法实现图片备用地址切换。

onerror 是唯一能在 标签加载失败时触发并执行 JS 的原生属性，用它切换 src 是最直接、兼容性最好的降级方案。

为什么不能只靠 alt 属性实现“降级”

alt 只是纯文本替代，不渲染图片，也不触发任何行为。用户看到的只是文字，不是另一张图。所谓“降级备用地址”，本质是「一张图挂了，自动换另一张」，这必须靠 JS 控制 src 属性重写。

• alt 必须写，但它是可访问性/SEO 要求，不是降级机制
• 浏览器不会因为 alt 存在就尝试加载第二张图
• 服务端 404 或 CORS 阻止加载时，alt 会显示，但页面里仍是空白占位（除非 CSS 显式设背景色）

onerror 触发时机与典型错误场景

该事件在图片资源加载失败后立即触发，包括：404、403、跨域被拒、路径拼错、协议不匹配（如页面是 https 但图片用 http）、DNS 解析失败等。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 只触发一次：即使你把新 src 也写错了，onerror 不会递归再触发
• 注意避免死循环：别在 onerror 里又指向一个可能失败的地址，且没做兜底
• 不要用 try/catch 包裹赋值——src 赋值本身不抛 JS 异常，失败是异步的

多级降级与常见写法陷阱

真正在意可用性的项目，往往需要 fallback 到本地图 → CDN 备用图 → 占位灰图（如 SVG data URL）。关键在于控制赋值顺序和防止重复触发。

• 首次加载失败后，立即将 this.src 改为第二地址；若第二地址也失败，onerror 不会再进——所以第二地址必须高度可靠
• 推荐把最终兜底图内联为 data URL，彻底规避网络请求失败风险：data:image/svg+xml,
• 不要在 onerror 里调用函数却不传参，比如 onerror="loadFallback()" —— 此时 this 指向 window，不是当前 元素
• 正确写法示例：

真正容易被忽略的是：现代构建工具（如 Vite、Webpack）常对静态资源路径做哈希处理，但 onerror 里的字符串路径不会被解析，一旦写死相对路径，在打包后极易 404。稳妥做法是把备用地址存在 data- 属性里，或由 JS 统一管理 fallback 列表。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！