当 `` 作为必需的回退元素应正常显示；若仍只显示 `alt` 文本，说明图片加载失败且未触发有效降级——本文详解正确实现默认图像的 html 结构、内联错误处理与 javascript 监听方案。
元素
本身也会触发独立的加载请求——如果它的 src 也失效（如示例中写成 "invalid"），则整个
✅ 正确做法是确保 的 src 指向一个始终可用的默认图像，例如：
@@##@@
⚠️ 若你无法保证 
的 src 总是有效（例如后端动态生成路径可能出错），可结合前端容错机制：
方案一：内联 onerror 处理（轻量简洁）
@@##@@
✅ 优点：无需额外 JS，兼容性好（支持所有现代浏览器及 IE）。 ❗ 注意：onerror 仅在 自身加载失败时触发，不影响 加载逻辑。
方案二：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 已就绪。
⚠️ 关键注意事项
必须包含 ，且
必须是最后一个子元素，否则语义无效；-
的 src 不可省略，即使为空字符串也会触发 404 请求；
- alt 属性仅用于无障碍和 SEO，不参与图像加载流程，不能替代 fallback 图像；
- 避免在
中使用无效 URL 测试逻辑——应通过真实网络异常或 srcset 不匹配场景验证 fallback 行为。
综上，可靠显示默认图像的核心在于：把 当作真正的兜底层，而非“备用选项”。优先保障其 src 稳定可用；再辅以 onerror 或 JS 监听提升鲁棒性，即可彻底解决
