图片加载失败时，onerror 是最直接兼容的降级方案：内联写法 onerror="this.src='b.jpg'" 替换 src，支持链式 fallback； 用于格式/尺寸主动适配；CSS background-image 或 ::before 适合装饰性图片；最终兜底推荐 base64 占位图。
图片加载失败时，<img alt="如何使用HTML实现图片降级替换功能" > 标签默认只显示一个断裂图标，用户体验差；用 onerror 手动 fallback 是最直接、兼容性最好、无需 JS 框架的降级方案。
用 onerror 替换 src 属性
这是最常用也最稳妥的做法：当原图加载失败触发 onerror 事件时，把 src 指向一张备用图（如占位图、文字图或 CDN 备份地址）。
-
onerror只在资源加载失败时触发一次，不会反复执行（即使备用图也失败，也不会无限递归） - 必须写成内联形式：
<img src="a.jpg" onerror="this.src='b.jpg'" alt="如何使用HTML实现图片降级替换功能" >，不能绑定外部函数（否则需手动移除事件防止重复触发） - 备用图路径建议用绝对路径或确保相对路径在当前上下文有效，避免二次 404
- 如果备用图也要降级（比如再 fallback 到本地
placeholder.png），可以链式写：onerror="this.src='fallback.jpg' || (this.src='placeholder.png')"
用 <picture></picture> + <source></source> 做格式/尺寸级降级
<picture></picture> 不是“错误降级”，而是“主动适配降级”：按浏览器支持、屏幕密度、视口宽度等条件，优先加载更优格式（如 WebP），不支持时回退到 JPEG/PNG。
- 顺序很重要：
<source></source>从上到下匹配，第一个满足条件的生效；最后必须跟一个<img alt="如何使用HTML实现图片降级替换功能" >作为兜底（它没有srcset也会被加载） - 不要指望
<source></source>的media或type属性能捕获网络错误——它们只管“是否选用”，不管“是否加载成功” - 示例：
<picture> <source srcset="photo.webp" type="image/webp"> <source srcset="photo.avif" type="image/avif"> <img src="photo.jpg" alt="描述"> </picture>
用 CSS background-image + ::before 实现样式层降级
当图片本质是装饰性内容（比如 banner 背景、icon），且允许用 CSS 控制时，可借助多背景语法或伪元素实现视觉 fallback。
立即学习“前端免费学习笔记（深入）”；
- CSS 中多个
background-image用逗号分隔，浏览器会尝试加载每个，但只渲染第一个有效项；后续项仅作 fallback，不触发额外请求（前提是前面已命中） - 更可靠的方式是用
::before叠加一层备用图：.card { background-image: url("main.jpg"); } .card::before { content: ""; position: absolute; background-image: url("fallback.jpg"); background-size: cover; opacity: 0; transition: opacity .2s; } .card.loaded::before { opacity: 1; } .card.loaded { background-image: none; }再配合 JS 监听load事件切换 class ——但这已超出纯 HTML 范畴 - 注意：CSS fallback 无法响应 404，只能靠预设顺序或 JS 补救
真正健壮的降级往往要组合使用：<picture></picture> 处理格式适配，onerror 应对加载失败，而 CSS 方案更适合非语义化场景。最容易被忽略的是：备用图本身也可能加载失败，所以最终兜底建议用 base64 编码的极简占位图（如 1×1 透明 GIF），确保无论如何都有内容可呈现。
