如何在HTML中实现图片降级回退机制-html教程-PHP中文网

onerror仅在图片请求发出后失败（如404、cors拦截）时触发，不响应空src、200占位图或路径解析失败；必须内联书写并立即执行this.onerror=null防死循环，fallback推荐用绝对路径或base64内联图。

如何在html中实现图片降级回退机制

浏览器原生支持图片加载失败后的降级处理，核心是利用 <img> 元素的 onerror 事件。它只在图片资源返回 404、跨域拒绝、MIME 类型错误或路径根本不存在等真实加载失败时触发，**不会**因网络延迟、慢速加载或 CORS 预检失败（但后续请求成功）而触发。

常见错误是把回退逻辑写成内联函数却忘了防止重复执行——一旦回退图也加载失败，onerror 会再次触发，导致无限循环或报错。

用 this.src = 'fallback.jpg' 前先清空 onerror，例如：this.onerror = null; this.src = 'fallback.jpg';
避免在内联属性中直接写函数体（如 onerror="this.src='a.jpg'"），无法清除事件监听，容易死循环
回退图本身建议使用绝对路径或确保其 100% 可达，否则二次失败无提示

不影响。懒加载仅控制图片是否延迟触发 fetch 请求，不改变 onerror 的触发时机和逻辑。只要图片最终开始加载并失败，onerror 就会执行。

但要注意：如果懒加载图片尚未进入视口，用户手动刷新页面或 JS 主动调用 img.load()，此时仍可能触发加载和失败流程。所以降级逻辑必须对任意加载时机健壮。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

CSS 本身没有加载失败回调机制，background-image: url(broken.jpg) 失败时静默忽略，不会降级到下一个 url() 或备用颜色。

真正可行的方式是用 JS 监听图片加载状态，再动态设置样式；或者改用 <img> 标签配合 object-fit 模拟背景效果，获得完整 onerror 支持。

纯 CSS 方案只能靠多层 fallback（如 background: #eee; background-image: url(a.jpg);），但失败图不会触发下一层
推荐组合：<img src="main.jpg" onerror="this.onerror=null;this.src='fallback.jpg';" style="max-width:90%">，再用父容器模拟背景定位
若必须用 CSS，可结合 image-set()（仅 Safari/Chrome 支持）或 @supports (background-image: image()) 做有限特性检测，但依然无法捕获失败

<picture></picture> 不是加载失败降级，而是基于媒体条件、格式支持主动选择最优资源。它不会因为 WebP 加载失败就切到 JPEG；但如果 WebP 不被支持，浏览器会跳过该 <source></source>，尝试下一个。

这属于“格式兼容性降级”，不是“网络错误降级”。两者目标不同，常需共存：先用 <picture></picture> 选格式，再在最终 <img> 上挂 onerror 处理加载失败。

示例：

<picture><source type="image/webp" srcset="a.webp"><source type="image/jpeg" srcset="a.jpg">
  @@##@@
</source></source></picture>

<source></source> 的 media 或 size 属性匹配失败时，浏览器继续向下找，不触发 onerror
所有 <source></source> 都不匹配？最终 <img src="a.jpg" alt="" onerror="this.onerror=null;this.src='placeholder.jpg'"> 仍会加载其 src，此时 onerror 才起作用