可靠图片降级需「多层 fallback 路径 + 状态隔离 + 渲染前校验」三者缺一不可：onerror 仅响应网络请求失败，对空 src、cors 拦截、200 占位图等静默；loading="lazy" 不支持时不会读取 data-src，src 必须指向可用资源；picture/webp 降级须显式声明标准 mime 类型并设强制兜底 img；video poster 失败需 new image() 预校验。
仅用 <img> 标签无法实现可靠降级——它没有格式回退、尺寸适配或加载失败兜底能力，强行只写 src 会导致 Safari 13.1 以下、IE、旧安卓 WebView 中白屏，且 onerror 不触发 CORS 或空 src 场景。
为什么 <img src="x.webp"> 在旧浏览器里直接空白
浏览器不认识 image/webp MIME 类型时，连 HTTP 请求都不会发，不是“加载失败”，而是“语法忽略”。Safari ≤13.1、IE11、Android 4.4 WebView 均如此。这不是 bug，是规范行为。
-
src值必须是静态路径（如/img/logo.jpg），不能带查询参数（?format=webp）——旧环境不解析参数，但可能因路径错误 404 - 绝对禁止
src=""、src="#"、src="broken.jpg"（文件实际不存在）——这些连onerror都不会触发 - 若必须用 WebP，唯一安全方式是把它放进
<picture></picture>的<source></source>里，并配type="image/webp"
onerror 内联写法必须加 this.onerror=null
动态绑定 img.onerror 在 Safari 和旧 Edge 中大概率不生效；全局监听 error 事件也捕获不到图片加载失败（它不冒泡）。唯一可靠的是 HTML 内联，且不切断会死循环。
- 正确写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;" - 更稳妥写法：
onerror="if (!this.src.includes('placeholder')) this.src='/assets/placeholder.svg'; this.onerror=null;" - 禁用
onerror内联字符串拼接（如onerror="loadFallback(this)"）——函数未定义时静默失败，且无法复用 - 占位图优先用
data:image/svg+xml;base64,...内联，彻底规避路径和 CDN 依赖
srcset 单独用等于没写，必须配 sizes
只写 srcset 不配 sizes，浏览器默认按 100vw 推算宽度，大概率加载远超需要的大图（比如手机加载 1200w 图），且旧浏览器直接忽略整个属性，退化到 src。
-
sizes必须反映图片**实际渲染宽度**，例如：sizes="(max-width: 768px) 100vw, 50vw" -
srcset每项必须带w描述符（推荐）或x描述符，但二者不可混用 - 必须保留
src属性：老浏览器（IE8–11）只读src，它是 fallback 的最后防线 - 示例：
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="风景">
关键图别懒加载，loading="lazy" 不是降级方案
loading="lazy" 是性能优化手段，不是降级机制。不支持该属性的浏览器会直接加载 src——如果 src 是空、占位图或被 display: none 隐藏，结果就是白屏。
- 首屏关键图（如商品主图、头像、Banner）必须跳过懒加载：直接写死
src，不加loading，也不设data-src - 若要用懒加载，
src必须指向一个真实可用资源（如 LQIP 图、1px GIF 或 CDN 托管占位图），data-src存高清地址且需静态写在 HTML 中 - 禁用
display: none包裹懒加载容器——Safari 和多数 Android WebView 会跳过该元素，后续显示也无效 -
fetchpriority="high"只对<img>的src生效，加在<source></source>上无效
最易被忽略的点：所有降级路径（src、srcset 中每一项、<picture></picture> 里每个 <source></source> 和末尾 <img> 的 src）都必须指向真实可访问的 URL，且服务端返回的 Content-Type 必须与 type 属性严格一致——差一个字母，整个链路就断在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
