当 `` 作为必需的回退元素应正常显示；若仍只显示 `alt` 文本，说明图片加载失败且未触发有效降级——本文详解正确实现默认图像的 html 结构、内联错误处理与 javascript 监听方案。
<picture> 元素的设计逻辑是：浏览器按顺序检查 <source> 的媒体查询与 srcset 可用性，仅当至少一个 <source> 匹配且成功加载时，才渲染该 source；否则，必须渲染其内部的 <img> 元素。但需注意：<img> 本身也会触发独立的加载请求——如果它的 src 也失效（如示例中写成 "invalid"），则整个 <picture> 将呈现为空白或仅显示 alt 文本，而非自动切换到其他备用图。
✅ 正确做法是确保 <img> 的 src 指向一个始终可用的默认图像，例如：
<picture> <source media="(min-width: 650px)" srcset="large.jpg"> <source media="(min-width: 465px)" srcset="medium.jpg"> <img src="fallback.jpg" alt="风景图：山峦、云雾与森林"> </picture>
⚠️ 若你无法保证 <img> 的 src 总是有效（例如后端动态生成路径可能出错），可结合前端容错机制：
方案一：内联 onerror 处理（轻量简洁）
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img
src="dynamic.jpg"
alt="默认风景图"
onerror="this.src='https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg'"
>
</picture>✅ 优点：无需额外 JS，兼容性好（支持所有现代浏览器及 IE）。 ❗ 注意：onerror 仅在 <img> 自身加载失败时触发，不影响 <source> 加载逻辑。
方案二：JavaScript 全局监听（灵活可控）
document.querySelectorAll('picture img').forEach(img => {
img.addEventListener('error', function() {
// 可根据业务逻辑动态设置 fallback
this.src = '/assets/images/fallback-default.jpg';
// 可选：记录错误日志
console.warn(`Image load failed: ${this.src}, using fallback.`);
});
});✅ 优势：支持统一管理 fallback 路径、添加加载状态、上报监控等；适合大型项目。
? 提示：建议将脚本置于 DOMContentLoaded 或页面底部，确保 DOM 已就绪。
⚠️ 关键注意事项
- <picture> 必须包含 <img>，且 <img> 必须是最后一个子元素，否则语义无效；
- <img> 的 src 不可省略，即使为空字符串也会触发 404 请求；
- alt 属性仅用于无障碍和 SEO，不参与图像加载流程，不能替代 fallback 图像；
- 避免在 <source> 中使用无效 URL 测试逻辑——应通过真实网络异常或 srcset 不匹配场景验证 fallback 行为。
综上，可靠显示默认图像的核心在于：把 <img> 当作真正的兜底层，而非“备用选项”。优先保障其 src 稳定可用；再辅以 onerror 或 JS 监听提升鲁棒性，即可彻底解决 <picture> 回退失效问题。
