如何仅用CSS/HTML隐藏图片破损图标且不使用display: none？

问题说明 #

• 用React渲染图片时，当image为空，src设为空字符串会显示破损图标
• 尝试用display: none隐藏，但会导致card__image的自定义CSS样式失效
• 需求：只去掉破损图标，不改动现有CSS布局和样式

解决方案 #

方法1：通过onError事件替换为透明像素

给img标签添加加载失败事件，触发时将src替换为1x1的透明base64像素，既不会显示破损图标，又能保留原有CSS样式：

<img 
  className="card__image" 
  src={image ? image : ""}
  alt={name || ""}
  onError={(e) => {
    e.target.src = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
  }}
/>

这个透明像素不会改变元素的盒模型，原有card__image的样式完全不受影响。

方法2：直接设置空状态下的透明src

如果确定image为空时图片一定会加载失败，也可以直接把空状态的src设为透明像素，提前避免破损图标出现：

<img 
  className="card__image" 
  src={image ? image : "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="}
  alt={name || ""}
/>

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