html - 显示为不可用时如何去除图像的边框？

Question

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

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

代码段中也有相同的代码

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%;
}

<img src="http://www.site/nonexistant.jpg" />

Answer 1

您不能为“损坏的图像”设置样式。但你可以解决它。例如，您可以用一些小的 javascript 替换损坏的图像:

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

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

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