美化加载失败的图片(Stying broken images)

原文出处https://bitsofco.de/styling-broken-images/

翻译：王浴昊

注明出处，本文可以转载。

---

加载失败的图片很丑陋。

事实上并不一定要如此。我们可以通过对<img>元素应用css样式来提供比默认选择更爽的体验。

两个关于<img>元素的事实

为了理解我们可以如何美化加载失败的图片，我们先要搞明白两种<img>元素的表现方式。

• 1、我们可以将常规的排版相关(typography-related)的样式应用到<img>元素上。如果图片加载失败，这些样式会被应用到备用文本上，如果加载成功的话，这些样式便不会起作用。
• 2、<img>元素是一个可替换元素。这是一种外观和尺寸均由外部资源决定的元素(Sitepoint)。由于这种元素由外部资源所控制，:before和:after伪元素通常不会和它同时显示。然而，当图片加载失败的时候，这些伪元素就显现出来了。

基于以上两点，我们才能够对<img>元素应用仅在图片加载失败时才会显示的样式，同时不影响图片的正常加载。

开始实战

基于以上信息，这里提供了一些如何美化加载失败图片的例子。我们用到了下面无效的链接:

<img src="http://bitsofco.de/broken.jpg" alt="alt="Kanye Laughing">

添加有用的信息

我们用来处理加载失败图片的一种方法是提供给用户一条说明图片加载失败的信息。使用attr()表达式，我们甚至可以显示图片的链接地址。

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

替换默认备用文本

另外，我们可以使用以上伪元素来替换默认显示的备用文本，方法是将伪元素放在默认文本之上，将其从视图中遮挡住。

img { /* Same as first example */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

补充美化方法

除了(或者代替)显示自定义信息，我们可以使用伪元素给加载失败的图片应用更多的样式。

img {  
  /* Same as first example */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

如果图片加载成功，在所有上述样式被应用在该元素上的同时，图片会正常显示。伪元素丝毫不会产生影响。

浏览器兼容性

不幸的是，并非所有的浏览器都按照同样的方式处理加载失败的图片。对于某些浏览器，即使图片没有显示，伪元素也不会出现。

以下是我的测试结果：

Browser	Alt Text	:before	:after
Chrome (Desktop and Android)	✓	✓	✓
Firefox (Desktop and Android)	✓	✓	✓
Opera (Desktop)	✓	✓	✓
Opera Mini	✓ **	✗	✗
Safari (Desktop and iOS)	✓ *	✗	✗
iOS Webview (Chrome, Firefox, others)	✓ *	✗	✗

• *备用文本只有在图片宽度能够容纳它的时候才会显示。如果没有显式指定图片宽度，备用文本是不会显示的。
• ** 字体样式不会生效。

对于不支持伪元素的浏览器，应用的特效会被忽略掉，并不会产生什么破坏性影响。这就意味着我们仍然可以对图片加上上面的样式，来对支持该方法的浏览器提供一种更加爽的体验。