如何隐藏图片加载失败的破损图标仅显示alt文本？求JS/jQuery/CSS方案

这个需求我在项目里碰到好多次了，给你整理几种实用的实现方式，分别用原生JS、jQuery和纯CSS来搞定：

思路很简单：监听图片的error事件，一旦加载失败，就处理掉破损图标，同时把alt文本展示出来。这里给两种实现思路：

思路A：用文本元素替换失效图片 #

适合需要完全自定义展示样式的场景：

// 处理单个指定图片
const testImg = document.getElementById('testImg');
testImg.addEventListener('error', function() {
  // 先把失效的图片隐藏
  this.style.display = 'none';
  
  // 创建一个用来显示alt文本的span元素
  const altTextEl = document.createElement('span');
  altTextEl.textContent = this.alt;
  
  // 给span加样式，尽量匹配原图片的尺寸和外观
  altTextEl.style.width = this.style.width || '120px';
  altTextEl.style.height = this.style.height || '120px';
  altTextEl.style.display = 'flex';
  altTextEl.style.alignItems = 'center';
  altTextEl.style.justifyContent = 'center';
  altTextEl.style.border = '1px solid #eee'; // 可选，模拟图片边框
  altTextEl.style.backgroundColor = '#f9f9f9'; // 可选，加个背景色
  
  // 用span替换原来的img元素
  this.parentNode.replaceChild(altTextEl, this);
});

// 批量处理页面上所有图片
document.querySelectorAll('img').forEach(img => {
  img.addEventListener('error', function() {
    const altTextEl = document.createElement('span');
    altTextEl.textContent = this.alt;
    altTextEl.style.width = this.offsetWidth + 'px';
    altTextEl.style.height = this.offsetHeight + 'px';
    altTextEl.style.display = 'flex';
    altTextEl.style.alignItems = 'center';
    altTextEl.style.justifyContent = 'center';
    this.parentNode.replaceChild(altTextEl, this);
  });
});

思路B：修改失效图片的样式，保留原元素 #

不想替换元素的话，可以用一张透明的1x1 GIF替换无效的src，然后设置样式让alt文本居中显示：

document.querySelectorAll('img').forEach(img => {
  img.addEventListener('error', function() {
    // 用透明GIF替换失效的src，隐藏破损图标
    this.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
    
    // 设置样式让alt文本居中显示
    this.style.color = '#333';
    this.style.fontSize = '14px';
    this.style.textAlign = 'center';
    this.style.lineHeight = this.offsetHeight + 'px';
    this.style.backgroundColor = '#f9f9f9';
  });
});

如果你的项目已经引入了jQuery，代码会更简洁，思路和原生JS一致：

替换元素版本 #

// 处理单个图片
$('#testImg').on('error', function() {
  const $img = $(this);
  $img.replaceWith(`
    <span style="
      display:flex;
      align-items:center;
      justify-content:center;
      width:${$img.width()}px;
      height:${$img.height()}px;
      border:1px solid #eee;
      background:#f9f9f9;
    ">${$img.attr('alt')}</span>
  `);
});

// 批量处理所有图片
$('img').on('error', function() {
  const $img = $(this);
  const altText = $img.attr('alt');
  $img.replaceWith(`
    <span style="
      display:flex;
      align-items:center;
      justify-content:center;
      width:${$img.width()}px;
      height:${$img.height()}px;
      border:1px solid #eee;
    ">${altText}</span>
  `);
});

修改样式版本 #

$('img').on('error', function() {
  const $img = $(this);
  $img
    .attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==')
    .css({
      color: '#333',
      fontSize: '14px',
      textAlign: 'center',
      lineHeight: $img.height() + 'px',
      backgroundColor: '#f9f9f9'
    });
});

这种方法不需要写JS，但只能处理已知src无效的场景（比如src="#""或src为空），无法捕获动态加载失败的图片（比如不存在的图片URL）：

/* 匹配src为#或空的图片 */
img[src="#"], img[src=""] {
  visibility: hidden;
  position: relative;
}

/* 用伪元素显示alt文本 */
img[src="#"]:after, img[src=""]:after {
  content: attr(alt);
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  color: #333;
}

总结 #

• 如果要处理所有可能的图片加载失败情况，优先选原生JS或jQuery方法，能精准捕获error事件，兼容性也更好。
• CSS方法只适合静态场景，比如你明确知道某个图片的src是无效值。

内容的提问来源于stack exchange，提问作者FanLee