当 `` 应作为兜底显示，但实际中因资源 404 或网络问题常仅显示 `alt` 文本。本文详解正确实现默认图像回退的 html、内联事件与 javascript 方案。
<picture> 元素的设计逻辑是：浏览器按 <source> 顺序匹配媒体条件与资源可用性，仅当至少一个 <source> 成功加载时，才渲染其内容；若所有 <source> 均因 URL 无效、跨域拒绝或网络中断而加载失败，浏览器不会自动降级到 <img>——它仍会尝试渲染 <img>，但若 <img src> 本身也失效（如 404），则最终只呈现 alt 文本，而非预期的备用图。
因此，关键在于确保 <img> 的 src 始终可访问，或为其添加主动错误处理机制。
✅ 正确做法一：保证 <img> 的 src 为有效默认图（推荐）
最简洁可靠的方式是直接将 <img> 的 src 指向一个高可用的默认图像（如 CDN 托管的占位图或业务主图），而非无效路径：
<picture> <source media="(min-width: 650px)" srcset="large.jpg"> <source media="(min-width: 465px)" srcset="medium.jpg"> <!-- ✅ 此 img 是最终回退，必须指向真实有效的 URL --> <img src="/uploads/20251227/1766824009694f9849d14b7.jpg" alt="Scenic mountain landscape"> </picture>
⚠️ 注意：<img> 不是“备用 source”，而是 <picture> 的必需子元素和最终渲染载体。它的 src 必须可加载，否则整个 <picture> 将退化为纯文本（仅显示 alt）。
✅ 正确做法二：使用 onerror 内联处理（轻量场景）
若需动态切换默认图（如根据主题换肤），可利用 <img> 的 onerror 事件修正 src：
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img
src="broken.jpg"
alt="Fallback image"
onerror="this.src='/uploads/20251227/1766824009694f9849d14b7.jpg'"
>
</picture>✅ 优势：无需额外 JS，兼容性好（IE9+）。
❌ 局限：不适用于 srcset / sizes 复杂响应式场景，且多次触发可能造成重复请求。
✅ 正确做法三：JavaScript 全局监听（健壮可控）
对复杂应用，建议用事件委托统一管理 <picture> 内部图片错误：
// 监听 document 上的 error 事件（冒泡至 picture）
document.addEventListener('error', (event) => {
if (event.target.tagName === 'IMG' && event.target.closest('picture')) {
const fallbackUrl = '/images/default-placeholder.jpg';
// 避免重复设置（防止死循环）
if (!event.target.dataset.fallbackApplied) {
event.target.src = fallbackUrl;
event.target.dataset.fallbackApplied = 'true';
}
}
});✅ 优势：集中管控、支持日志上报、可结合懒加载/CDN 失败策略。
? 提示：务必添加 dataset 标记防止 onerror 循环触发（当 fallback 图也加载失败时）。
总结
- <picture> 的 <img> 不是“自动回退”，而是强制渲染层，其 src 必须有效；
- 优先采用「静态有效 <img src>」方案，简单、语义清晰、无 JS 依赖；
- 动态需求下，onerror 或事件监听均可行，但需规避重复错误处理；
- 切勿在 <source> 中使用无效 URL 测试回退逻辑——应通过断网调试或 srcset 指向 404 地址验证流程。
遵循以上原则，即可确保 <picture> 在任意设备、任意网络条件下，始终优雅呈现默认图像。
