图片加载失败时应通过onerror触发降级逻辑，立即移除监听器防止循环；多层fallback需用Image对象递归预加载；CSS background无onerror，推荐用+object-fit替代；不提供容错fallback，仅用于响应式选源。
图片加载失败时怎么触发降级逻辑
浏览器原生不提供「图片加载失败后自动重试另一张」的机制，onerror 是唯一可依赖的钩子，但它只在当前 <img alt="如何使用HTML实现图片降级后自动替换" > 的 src 确实 404、跨域拒绝、解析失败等场景下触发。注意：它不会因网速慢、DNS 延迟或 CORS 预检失败（但最终资源可加载）而触发——这些属于加载中状态，不是错误。
常见误操作是把降级 URL 写死在 onerror 里又没清除事件监听，导致降级图再失败时无限循环调用。正确做法是：触发一次后立即移除自身监听器。
- 用内联
onerror="this.onerror=null; this.src='fallback.jpg'" - 或在外部 JS 中用
addEventListener('error', handler, { once: true }) - 避免在 handler 里再次赋值
this.src后不设once或清空onerror，否则可能递归触发
如何让降级图也支持降级（多层 fallback）
单层 onerror 只能兜底一次。要实现「原始图 → CDN 图 → 本地图 → 占位图」这样的链式降级，必须手动控制加载顺序和错误传递。核心思路是：用 Image 对象预加载，成功则赋给真实 <img alt="如何使用HTML实现图片降级后自动替换" >，失败则尝试下一个 URL。
示例逻辑（不依赖框架）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
function loadWithFallback(imgEl, urls, index = 0) {
if (index >= urls.length) return;
const img = new Image();
img.onload = () => imgEl.src = urls[index];
img.onerror = () => loadWithFallback(imgEl, urls, index + 1);
img.src = urls[index];
}
// 调用：loadWithFallback(document.getElementById('my-img'), [
// 'https://cdn.example.com/photo.jpg',
// '/images/photo-fallback.jpg',
// '/images/placeholder.svg'
// ]);
- 每次新建
Image实例，避免复用导致状态污染 - 不要在
onload中直接操作原<img alt="如何使用HTML实现图片降级后自动替换" >的onerror，它可能已被触发过 - URL 数组越靠前优先级越高，但也要考虑 CDN 可用性；本地 fallback 路径建议用绝对路径，避免相对路径在 SPA 路由下失效
CSS background-image 怎么做降级
background-image 没有 onerror，也不能用 JS 直接监听加载失败。可行方案只有两种：利用 CSS 层叠顺序兜底，或改用 <img alt="如何使用HTML实现图片降级后自动替换" > + object-fit 模拟背景效果。
- 纯 CSS 方案：按从右到左顺序写多个
background-image，浏览器会忽略语法错误或无法加载的项，继续尝试下一个（但实际兼容性差，多数浏览器只认最后一个有效声明） - 推荐做法：用
<img alt="如何使用HTML实现图片降级后自动替换" >替代div，设置position: absolute+object-fit: cover覆盖容器，再用上述 JS 降级逻辑控制其src - 如果必须用 background，可在 JS 中先用
fetch(url).then(...).catch(...)探测可用性，再动态设置style.backgroundImage，但注意 CORS 限制会导致fetch失败即使图片能被<img alt="如何使用HTML实现图片降级后自动替换" >加载
现代方案：使用 <picture></picture> 和 srcset 是否能替代降级
不能。<picture></picture> 解决的是「根据屏幕尺寸、像素密度、格式支持选择最优源」，不是「某个源挂了换另一个」。它的 <source></source> 标签在匹配条件满足时才加载，不匹配就跳过，不会因为某 src 404 就 fallback 到下一个 <source></source>。
-
<img src="a.jpg" onerror="this.src='b.jpg'" alt="如何使用HTML实现图片降级后自动替换" >是错误兜底 -
<picture><source srcset="a.webp" type="image/webp"><img src="a.jpg" alt="如何使用HTML实现图片降级后自动替换" ></source></picture>是格式兼容，不是容错 - 想兼顾两者？可以组合：
<picture></picture>内每个<source></source>和<img alt="如何使用HTML实现图片降级后自动替换" >自身都带onerror降级逻辑
真正容易被忽略的是缓存行为：浏览器对 404 的 src 也会缓存，下次即使服务恢复，onerror 也不会再触发。上线新资源后，若旧 URL 已返回 404，需清空浏览器缓存或改用带版本号的路径（如 photo.jpg?v=2）才能重新触发加载流程。
