onerror不是万能开关，仅响应非2xx状态或网络中断；空src、CORS拦截、200占位图等场景下完全静默，必须内联书写并立即执行this.onerror=null防死循环，推荐用base64内联SVG兜底。
图片加载失败时，onerror 不是万能开关，它只响应「请求发出后返回非 2xx 状态」或网络中断；空 src、CORS 拦截、服务器返回 200 占位图等场景下它完全静默——靠它单点兜底必然白屏。
onerror 必须内联写且立即切断事件链
onerror 动态绑定在 Safari 和旧 Edge 中大概率不触发，document.addEventListener('error') 也捕获不到（它不冒泡）。唯一可靠的是 HTML 内联写法，且不加防护会死循环。
- 错误写法：
onerror="this.src='/fallback.png'"—— fallback 图再失败就无限重入 - 正确写法：
onerror="this.src='/img/placeholder.svg'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('placeholder')) this.src='/img/placeholder.svg'; this.onerror=null" - 终极保底：用 base64 内联 SVG，彻底规避路径风险：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjEycHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IiM1NTUiPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg=='
src 必须始终指向一个真实可加载的资源
80% 的“白屏”问题根源是 src 本身为空、写错、或指向断网即失效的动态地址（如 /api/image?uid=123&format=webp）。浏览器不会因为 src 失效就自动切到 data-src 或 <source></source>。
- 推荐用 CDN 托管的占位图：
src="/img/px.gif"（1×1 透明 GIF，HTTP 200） - 禁止：
src=""、src="#"、src="broken.jpg"（文件实际不存在） - SSR 渲染时，
src值必须由服务端直接写出，不能依赖客户端 JS 注入 - 轮播图首张图必须写死在 HTML 中带
src和alt，否则禁用 JS 时整块空白
结构必须合规，![HTML图片加载失败怎么降级处理]()
是强制兜底
<picture></picture> 不是“多个 <source></source> 任选其一”，而是：所有 <source></source> 匹配失败后，仍会尝试加载内部 <img alt="HTML图片加载失败怎么降级处理" > 的 src。如果这个 src 也 404，就只剩 alt 文本。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML图片加载失败怎么降级处理" >必须作为<picture></picture>的最后一个子元素，且其src必须独立可访问（不能带查询参数、不能是相对路径错误的地址） -
<source></source>必须按支持强度从强到弱排列：type="image/avif"→type="image/webp"→ 最后才是<img src="fallback.jpg" alt="HTML图片加载失败怎么降级处理" > - IE 或旧 WebView 会忽略整个
<picture></picture>，只渲染<img alt="HTML图片加载失败怎么降级处理" >—— 这反而是优势，前提是你的<img src alt="HTML图片加载失败怎么降级处理" >真的能加载 -
alt只属于最终那个<img alt="HTML图片加载失败怎么降级处理" >子元素，<source></source>里写的media或type不影响alt行为
loading="lazy" + data-src 白屏的根本原因
浏览器不支持 loading="lazy" 时，它不会报错，也不会自动读取 data-src —— 它只是当这个属性不存在，然后按默认逻辑加载 src。如果此时 src 是空值、占位图路径错误、或被 CSS 隐藏，结果就是白屏。
-
src必须指向可用资源（1px GIF、LQIP 图、或 SSR 渲染出的真实小图） -
data-src必须静态写在 HTML 中（不能靠 JS 注入），否则断网时 JS 加载失败，data-src就丢了 - 关键图片（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src - 避免用
display: none包裹懒加载容器 —— Safari 和多数 Android WebView 会直接跳过该元素，后续显示也无效
真正起作用的从来不是某一个属性或事件，而是「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者缺一不可。最容易被忽略的，是把降级逻辑押注在 JS 上——而断网时，JS 文件根本加载不了。
