如何使用HTML实现图片降级替换功能-html教程-PHP中文网

图片加载失败时，onerror 是最直接兼容的降级方案：内联写法 onerror="this.src='b.jpg'" 替换 src，支持链式 fallback；用于格式/尺寸主动适配；CSS background-image 或 ::before 适合装饰性图片；最终兜底推荐 base64 占位图。

如何使用html实现图片降级替换功能

图片加载失败时，标签默认只显示一个断裂图标，用户体验差；用 onerror 手动 fallback 是最直接、兼容性最好、无需 JS 框架的降级方案。

用 `onerror` 替换 `src` 属性

这是最常用也最稳妥的做法：当原图加载失败触发 onerror 事件时，把 src 指向一张备用图（如占位图、文字图或 CDN 备份地址）。

onerror 只在资源加载失败时触发一次，不会反复执行（即使备用图也失败，也不会无限递归）
必须写成内联形式：，不能绑定外部函数（否则需手动移除事件防止重复触发）
备用图路径建议用绝对路径或确保相对路径在当前上下文有效，避免二次 404
如果备用图也要降级（比如再 fallback 到本地 placeholder.png），可以链式写：onerror="this.src='fallback.jpg' || (this.src='placeholder.png')"

用 + 做格式/尺寸级降级

不是“错误降级”，而是“主动适配降级”：按浏览器支持、屏幕密度、视口宽度等条件，优先加载更优格式（如 WebP），不支持时回退到 JPEG/PNG。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

顺序很重要：从上到下匹配，第一个满足条件的生效；最后必须跟一个作为兜底（它没有 srcset 也会被加载）
不要指望的 media 或 type 属性能捕获网络错误——它们只管“是否选用”，不管“是否加载成功”

示例：

<picture><source srcset="photo.webp" type="image/webp"><source srcset="photo.avif" type="image/avif">
  @@##@@
</source></source></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 范畴