当 `` 中所有 `` 均加载失败时，`` 应作为兜底显示，但实际中因资源 404 或网络问题常仅显示 `alt` 文本。本文详解正确实现默认图像回退的 html、内联事件与 javascript 方案。

元素的设计逻辑是：浏览器按 顺序匹配媒体条件与资源可用性，仅当至少一个 成功加载时，才渲染其内容；若所有 均因 URL 无效、跨域拒绝或网络中断而加载失败，浏览器不会自动降级到 ——它仍会尝试渲染 ，但若 本身也失效（如 404），则最终只呈现 alt 文本，而非预期的备用图。

因此，关键在于确保 的 src 始终可访问，或为其添加主动错误处理机制。

✅ 正确做法一：保证 的 src 为有效默认图（推荐）

最简洁可靠的方式是直接将 的 src 指向一个高可用的默认图像（如 CDN 托管的占位图或业务主图），而非无效路径：

  
  
  
  @@##@@

⚠️ 注意： 不是“备用 source”，而是 的必需子元素和最终渲染载体。它的 src 必须可加载，否则整个 将退化为纯文本（仅显示 alt）。

✅ 正确做法二：使用 onerror 内联处理（轻量场景）

若需动态切换默认图（如根据主题换肤），可利用 的 onerror 事件修正 src：

  
  
  @@##@@

✅ 优势：无需额外 JS，兼容性好（IE9+）。
❌ 局限：不适用于 srcset / sizes 复杂响应式场景，且多次触发可能造成重复请求。

✅ 正确做法三：JavaScript 全局监听（健壮可控）

对复杂应用，建议用事件委托统一管理 内部图片错误：

// 监听 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 图也加载失败时）。

总结

• 的 不是“自动回退”，而是强制渲染层，其 src 必须有效；
• 优先采用「静态有效 」方案，简单、语义清晰、无 JS 依赖；
• 动态需求下，onerror 或事件监听均可行，但需规避重复错误处理；
• 切勿在 中使用无效 URL 测试回退逻辑——应通过断网调试或 srcset 指向 404 地址验证流程。

遵循以上原则，即可确保 在任意设备、任意网络条件下，始终优雅呈现默认图像。