图片显示不可用时如何去除边框？答案

【问题标题】：How to remove the border of image when it is shown as unavailable?图片显示不可用时如何去除边框？
【发布时间】：2018-01-27 19:44:45
【问题描述】：

有没有办法在图像尚未加载但设置了高度和宽度时移除边框？我正在创建一个延迟加载，因此图标将作为背景图像在内部居中，直到图像加载。

http://codepen.io/anon/pen/bgoqYv

sn-p 中的代码也一样

body {
  padding: 50px;
}

img {
  height: 200px;
  width: 200px;
  
  /* border: 0 !important; */
    background-image: url(https://i0.wp.com/cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

&lt;img src="http://www.site/nonexistant.jpg" /&gt;

【问题讨论】：

不要使用不存在的图片，使用小的透明 GIF 或类似的东西。

标签： html css

【解决方案1】：

您无法设置“破损图像”的样式。但是你可以解决它。例如，您可以用一些小 javascript 替换损坏的图像：

<img src="idonotexist.jpg" onerror="this.src='trans.png';">

当然你可以在 js 中写得更干净，而不是在 img 标签内。

或者，您可以使用伪类来隐藏损坏的图像等。看看这里：https://bitsofco.de/styling-broken-images/

【讨论】：