如何仅为img的alt text添加padding且不影响正常图片样式

可以实现，目前有两种常用的方案，都可以做到仅加载失败显示alt文本时带padding，不影响正常加载的图片样式：

方案1：纯CSS实现（兼容性较好） #

核心原理是：<img>属于替换元素，加载成功时，内部的图片内容会完全覆盖元素本身，且给替换元素设置的::before/::after伪元素不会渲染；只有加载失败时，元素会表现为普通行内块状态，伪元素可以正常渲染，我们可以直接用伪元素自定义alt文本的样式，不需要修改原有img的padding属性。

示例代码：

/* 避免默认alt文本和伪元素文本重复显示 */
img {
  color: transparent;
}
/* 仅在img加载失败时生效，自定义alt文本样式 */
img::after {
  /* 读取alt属性的内容作为显示文本 */
  content: attr(alt);
  /* 按需设置padding */
  padding: 8px 12px;
  /* 其他你需要的样式 */
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #333;
  border: 1px solid #eee;
  background: #f5f5f5;
}
/* 兼容火狐浏览器的额外规则 */
img:-moz-broken {
  padding: 8px 12px;
  box-sizing: border-box;
  color: #333;
}

方案2：JS配合CSS实现（可控性更高） #

如果需要更精准的控制，比如区分不同加载状态的样式，或者兼容极端老旧的浏览器，可以用JS监听图片的加载状态，加载失败时给元素加专属类：

JS代码示例：

document.querySelectorAll('img').forEach(img => {
  // 加载失败时添加专属类
  img.addEventListener('error', () => {
    img.classList.add('img-broken')
  })
  // 加载成功时移除类，避免缓存场景下的样式异常
  img.addEventListener('load', () => {
    img.classList.remove('img-broken')
  })
})

对应的CSS规则：

.img-broken {
  padding: 8px 12px;
  box-sizing: border-box;
}

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