onerror 是唯一能在 加载失败时触发并执行 JS 的原生属性，用它切换 src 是最直接、兼容性最好的降级方案；alt 仅提供文本替代，不触发加载行为，无法实现图片备用地址切换。
onerror 是唯一能在 <img alt="如何在HTML中设置图片降级备用地址" > 标签加载失败时触发并执行 JS 的原生属性，用它切换 src 是最直接、兼容性最好的降级方案。
为什么不能只靠 alt 属性实现“降级”
alt 只是纯文本替代，不渲染图片，也不触发任何行为。用户看到的只是文字，不是另一张图。所谓“降级备用地址”，本质是「一张图挂了，自动换另一张」，这必须靠 JS 控制 src 属性重写。
-
alt必须写，但它是可访问性/SEO 要求，不是降级机制 - 浏览器不会因为
alt存在就尝试加载第二张图 - 服务端 404 或 CORS 阻止加载时，
alt会显示，但页面里仍是空白占位（除非 CSS 显式设背景色）
onerror 触发时机与典型错误场景
该事件在图片资源加载失败后立即触发，包括：404、403、跨域被拒、路径拼错、协议不匹配（如页面是 https 但图片用 http）、DNS 解析失败等。
生成可在 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,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="12" fill="%23999">image</text></svg> - 不要在
onerror里调用函数却不传参，比如onerror="loadFallback()"—— 此时this指向window，不是当前<img alt="如何在HTML中设置图片降级备用地址" >元素 - 正确写法示例：
<img src="a.jpg" onerror="this.src='b.jpg'" alt="描述">
真正容易被忽略的是：现代构建工具（如 Vite、Webpack）常对静态资源路径做哈希处理，但 onerror 里的字符串路径不会被解析，一旦写死相对路径，在打包后极易 404。稳妥做法是把备用地址存在 data- 属性里，或由 JS 统一管理 fallback 列表。
