当 `` 应作为兜底显示，但实际却只呈现 `alt` 文本——本文详解正确回退逻辑、常见误区及健壮的 javascript 与内联方案。
HTML <picture> 元素的设计逻辑是：浏览器按顺序匹配 <source> 的媒体条件与资源可用性，仅当至少一个 <source> 成功加载时，才渲染其内容；而 <img> 标签并非“最后兜底”，而是仅在无匹配 <source>（即所有 media 条件都不满足）时才被使用。因此，你示例中 srcset="invalid.jpg" 加载失败，但媒体条件 (min-width:650px) 等仍被满足，浏览器会尝试加载该 <source> 并失败，不会自动降级到 <img>——这是关键误解。
✅ 正确做法是确保 <img> 在所有 <source> 失败时仍能触发加载，有以下两种推荐方案：
方案一：为 <img> 添加 onerror 内联处理（轻量、即时）
<picture>
<source media="(min-width: 650px)" srcset="invalid-desktop.jpg">
<source media="(min-width: 465px)" srcset="invalid-tablet.jpg">
<img
src="/uploads/20251227/1766824597694f9a9596b7a.jpg"
alt="Scenic mountain landscape"
onerror="this.src='/uploads/20251227/1766824597694f9a9596b7a.jpg'; this.onerror=null;">
</picture>⚠️ 注意：onerror 仅对 <img> 自身 src 失败触发（不监听 <source>），且需设 this.onerror=null 防止循环调用。此法简洁，适合静态页面。
方案二：JavaScript 全局监听（推荐用于复杂场景）
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('picture').forEach(picture => {
const img = picture.querySelector('img');
if (!img) return;
// 监听 img 加载失败
img.addEventListener('error', () => {
// 可选：先尝试 fallback 图片
const fallbackSrc = '/uploads/20251227/1766824597694f9a9596b7a.jpg';
img.src = fallbackSrc;
// 进一步可记录错误或上报监控
console.warn(`[Picture Fallback] IMG load failed, using default: ${fallbackSrc}`);
});
// （进阶）也可监听 source 加载失败（需 polyfill 或现代 API）
// 注意：原生 `error` 事件不冒泡自 source，需通过 Promise.all + fetch 模拟检测
});
});✅ 最佳实践建议：
- 永远提供有效的 <img src>：即使 <source> 全部有效，<img> 也是语义化必需项（无障碍、SEO、低带宽环境）；
- 避免 srcset 指向无效路径：开发阶段用真实 URL 或占位服务（如 https://via.placeholder.com/800x400?text=Loading...）；
- 不要依赖 <source> 的 onerror：<source> 元素不支持 onerror 属性，也无法直接绑定事件；
- 考虑渐进增强：若 JS 不可用，确保 <img> 的 src 是最终可靠地址，而非 invalid 或空值。
综上，<picture> 的默认图像并非“自动兜底”，而是需主动保障 <img> 自身健壮性。结合 onerror 或 JS 监听，即可实现真正可靠的响应式图像容错体验。
