onerror仅响应HTTP请求失败，对空src、CORS拦截、200占位图等静默错误无效；可靠降级需统筹路径、结构、事件链与fallback资源可用性。
图片加载失败降级不是加个 onerror 就完事——它只响应「请求发出后失败」，对空 src、CORS 拦截、200 占位图等静默场景完全无感。真正可靠的降级必须同时控制路径、结构、事件链和 fallback 资源可用性。
onerror 为什么经常不触发
onerror 是个“条件触发器”，不是“兜底开关”。它只在浏览器发出了 HTTP 请求且收到非 2xx 响应（如 404、500）或网络中断时才执行。以下情况它根本不会运行：
-
src=""、src=" "、src="#"：没发请求，直接跳过 - 跨域图片没加
crossorigin属性：被 CORS 拦截，控制台报Blocked by CORS policy，但onerror不触发 - 服务器对 404 返回一个真实占位图（如
/img/404.png），HTTP 状态码是 200：浏览器认为“加载成功” - 本地开发用相对路径
src="logo.jpg"，部署后因路由重写导致解析失败：路径错误未进入网络层，onerror不启动
onerror 必须内联 + 立即切断事件链
动态绑定 img.onerror = handler 在 Safari 和旧 Edge 中大概率失效；document.addEventListener('error') 默认不捕获它（不冒泡）。唯一跨浏览器稳定的方式是 HTML 内联写法，且必须防死循环：
- 错误写法：
onerror="this.src='/fallback.png'"—— 若/fallback.png也 404，会无限递归触发 - 正确写法：
onerror="this.src='/fallback.png'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) { this.src='/fallback.png'; this.onerror=null; }" - 终极保险：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjEycHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IiM1NTUiPk5vIEltZzwvdGV4dD48L3N2Zz4='; this.onerror=null"
src 必须始终指向高可用资源
80% 的白屏问题，根源是 src 本身不可用。浏览器不会因为 src 失效就自动切到 data-src 或 <source></source>——它只管加载 src，失败了就停在那里。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 禁止
src=""、src="#"、src="./broken.jpg"（本地能跑，部署后 404） - 推荐用 CDN 托管的静态占位图：
src="/img/placeholder.svg"或 1px GIF：src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" - SSR 渲染时，
src值必须由服务端写出，不能依赖客户端 JS 注入——否则断网时连占位图都出不来 - 关键图片（如商品主图、头图）跳过懒加载：不写
loading="lazy"，也不设data-src，src直接指向真实图
结构失效的常见坑
<picture></picture> 不是“多选一”，而是“匹配优先 + 强制兜底”。它的 <img alt="HTML图片加载失败降级异常怎么处理" > 子元素不是可选项，而是最终渲染载体——所有 <source></source> 加载失败，仍会尝试加载 <img src alt="HTML图片加载失败降级异常怎么处理" >。
- 错误结构：
<picture><source srcset="a.avif" type="image/avif"></source></picture>—— 缺少<img alt="HTML图片加载失败降级异常怎么处理" >，Safari ≤13.1、IE 直接留白 - 正确结构：
<picture><source srcset="a.avif" type="image/avif"><source srcset="a.webp" type="image/webp"><img src="/img/fallback.jpg" alt="描述"></source></source></picture> -
<img src alt="HTML图片加载失败降级异常怎么处理" >必须独立可访问：不能带动态参数（如?t=123），不能是相对路径错误的地址 - 所有格式图片（AVIF/WebP/JPEG）原始像素宽高必须完全一致，否则降级时 layout shift；无法保证时，用
aspect-ratio或padding-top锁死容器比例
最常被忽略的一点：降级不是“救火”，而是提前把每张图的 src、尺寸、MIME 类型、CORS 配置都当成契约来维护。一旦某个环节松动（比如 CMS 导出抹掉 JPEG 的 EXIF 宽高），整个 fallback 链就可能在某台 Android 设备上无声断裂。
