HTML中<img>加载失败时如何显示带HTML标签的替代内容而非纯文本

安全阿岳

2026-9-25

实现方案

有两种成熟的实现方式，可根据你的场景选择：

方案1：原生HTML降级实现（无CSS/JS依赖，兼容性最优）

直接使用<object>标签包裹图片资源与备选列表，浏览器会在图片加载失败时自动渲染标签内部的回退内容，完全原生支持HTML标签的展示：

<object data="风格化列表图片路径.png" type="image/png" width="适配的宽度" height="适配的高度">
  <!-- 以下为图片加载失败时展示的回退列表 -->
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</object>

该方案兼容所有现代浏览器及低版本IE，无需额外代码，是最推荐的实现方式。

方案2：CSS + 轻量JS实现（保留原生img标签特性）

如果你需要保留原生<img>标签的懒加载、响应式适配等能力，可以结合图片加载错误事件与CSS类切换实现：

HTML结构

<div class="list-container">
  <img src="风格化列表图片路径.png" alt="风格化列表" onerror="this.parentElement.classList.add('load-error')">
  <div class="list-fallback">
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div>
</div>

CSS规则

/* 默认隐藏回退列表 */
.list-fallback {
  display: none;
}
/* 图片加载失败时切换展示状态 */
.list-container.load-error img {
  display: none;
}
.list-container.load-error .list-fallback {
  display: block;
}