稳定图片降级方案是：onerror中首句设this.onerror=null，fallback用绝对路径SVG；src须为可用资源，data-src存高清图；现代浏览器可用:has()纯CSS占位，但需配合aspect-ratio防布局塌陷。
onerror 属性必须加 this.onerror=null
直接写 onerror="this.src='fallback.png'" 在多数情况下根本不会显示占位图——因为 fallback 图片加载失败时，浏览器会静默阻止第二次 onerror 触发，导致降级链断裂。真实错误路径（如 404、CORS、空格编码问题）往往让 fallback 本身也失败。
稳定写法只有一条：确保 fallback 路径绝对可用，并立即卸载事件监听：
-
onerror中第一句必须是this.onerror=null - fallback 图片用
.svg格式（体积小、无渲染失败风险），路径写成绝对路径，如/assets/placeholder.svg -
alt属性不能省，它是无障碍基础，也是视觉降级时唯一可见文案
最小可行 HTML 片段：
<img src="broken.jpg" onerror="this.onerror=null;this.src='/assets/placeholder.svg'" alt="图片加载失败">
loading="lazy" 降级失效的真正原因不是不支持，而是 src 没兜底
很多人以为加了 loading="lazy" 就万事大吉，结果在 Safari 或旧 Android WebView 里白屏一片。这不是兼容性问题，是逻辑漏洞：当浏览器不支持该属性时，它会直接忽略，然后按原 src 值加载——如果 src 是空、data: 协议或非法路径，就必然白屏。
立即学习“前端免费学习笔记（深入）”；
可靠做法是让 src 始终指向一个确定可用的资源：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
src放真实小图（1–2KB PNG）、LQIP base64 或纯色 CSS 渐变背景（配合background-image+aspect-ratio） -
data-src存高清图地址，且必须静态存在于 HTML 中（不能靠 JS 注入） - 服务端渲染首屏图片时，
src必须是可访问的真实地址，不能依赖客户端 JS 补全
用 CSS :has() 实现无 JS 占位（Chrome 105+/Safari 15.4+）
如果你的项目已明确支持现代浏览器，:has() 是目前最干净的纯 CSS 降级方案——它不触发额外请求，不依赖 JS 执行时机，也不怕断网。
核心思路是：先设默认背景占位，再用伪类检测加载异常状态：
.img-placeholder {<br> background: #eee url(/assets/placeholder.svg) no-repeat center / contain;<br>}<br>.img-placeholder:has(:not([src])),<br>.img-placeholder[src=""],<br>.img-placeholder[src^="data:"],<br>.img-placeholder[src^="http://localhost"] {<br> background-color: #f0f0f0;<br>}
注意：:has() 无法捕获 404，只能识别空 src、无效协议或本地开发路径；真正在意 404 降级，仍需 JS 的 error 事件补足。
懒加载容器必须设 aspect-ratio 或宽高，否则占位即失效
没设尺寸的 <img alt="如何通过HTML设置图片降级加载占位符" > 在加载前没有盒模型，CSS 背景或伪元素占位都会塌陷，文字上推重排——这不是“占位没起作用”，是布局本身没预留空间。
现代写法优先用：
-
aspect-ratio: 16/9+width: 100%，适配响应式 - 老浏览器回退用
height: 0; padding-bottom: 56.25%+position: relative - 禁用
min-height或max-width替代——它们不参与初始布局计算
真正麻烦的从来不是“怎么放一个灰色方块”，而是当图片尺寸动态变、容器宽高不可控、或 SSR 和 CSR 尺寸不一致时，占位和真实图之间出现错位或裁切。
