如何保留img元素的同时移除图片加载失败的破损图标？

要实现图片URL不存在时保留img元素、显示预设背景图而非破损图标，可采用以下两种实用方案：

方案一：纯CSS技巧 #

通过隐藏img加载失败时的默认提示元素，让背景图完整显示：

修改后的HTML：

<img src="error.png" alt="">

对应的CSS：

img {
  width: 100px;
  height: 100px;
  background-image: url(url.png);
  background-size: cover;
  color: transparent; /* 隐藏alt文本 */
  font-size: 0; /* 消除文本占位空间 */
  line-height: 0; /* 确保无多余高度 */
}

原理：img加载失败时，浏览器会渲染alt文本和破损图标；将alt设为空字符串、文字颜色透明并消除字号，就能完全隐藏默认提示，只显示背景图。

方案二：JS监听错误事件（兼容性更优） #

通过监听img的error事件，在加载失败时替换src为透明占位图，彻底避免破损图标出现：

HTML保持不变：

<img src="error.png">

添加JS代码：

document.querySelectorAll('img').forEach(img => {
  img.addEventListener('error', function() {
    // 替换为1x1透明GIF的base64编码，无额外网络请求
    this.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
  });
});

原理：图片加载失败触发error事件后，将src替换为本地透明像素，此时img会正常显示预设背景图，不会出现任何破损提示。

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