【第1845期】给破碎图片添加样式

前言

文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。

@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金（@zhangbao90s）。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。

正文从这开始～～

如果 <img> 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋：

1. <imgsrc="http://bitsofco.de/broken.jpg"alt="This image is broken! Ugly, isn’t it?">

我们看到的是一个破碎的图片（Broken Images）：

<img> 元素上的两个事实

在理解给破碎图片添加样式的方式前，我们需要先学习 <img> 元素上存在的两个事实：

我们可以在 <img> 元素上使用常规的排版相关样式。这些样式会被应用到替换文本上（即 alt 属性值），如果图片正常显示了，这些样式也不会影响图片的渲染。

<img> 元素是替换元素。这就表示“该类元素的外观和尺寸是受到外部资源控制的”（Sitepoint）。因为元素是受到外部资源控制的，因此 ::before、::after 伪元素的样式并不会影响图片渲染。然而，当图片因为地址无效或网络等原因加载失败后，伪元素就出现了。

正是基于上面的两个事实，才让我们为破碎图片设置样式成为可能。

撸代码

我们还是基于上面的无效图片地址，设置样式：

1. <imgsrc="http://bitsofco.de/broken.jpg"alt="Kanye Laughing">

添加有用信息

当图片资源加载失败时，我们可以提供一些有用的信息展示给用户，让用户知晓发生了什么。这里要用到 attr() 功能函数，这样还可以把问题链接地址显示出来。

1. img {

2. font-family: 'Helvetica';

3. font-weight: 300;

4. line-height: 2;

5. text-align: center;

6. width: 100%;

7. height: auto;

8. display: block;

9. position: relative;

10. }

11. img:before {

12. content: "We're sorry, the image below is broken :(";

13. display: block;

14. margin-bottom: 10px;

15. }

16. img:after {

17. content: "(url: " attr(src) ")";

18. display: block;

19. font-size: 12px;

20. }

覆盖默认的替换文本

还有一种方案，就是伪元素绝对定位在替换文本之上，这样替换文本被遮住，我们就只能看到伪元素了。

1. img { /* 样式跟第一个例子里是一样的 */}

2. img:after {

3. content: "\f1c5"" " attr(alt);

4. font-size: 16px;

5. font-family: FontAwesome;

6. color: rgb(100, 100, 100);

7. display: block;

8. position: absolute;

9. z-index: 2;

10. top: 0;

11. left: 0;

12. width: 100%;

13. height: 100%;

14. background-color: #fff;

15. }

再进一步设置样式

除了可以显示默认的替换文本信息，我们还可以通过伪元素为破碎图片进一步添加更细腻的样式

1. img {

2. /* 样式跟第一个例子里是一样的，然后加了下面一个声明 */

3. min-height: 50px;

4. }

5. img:before {

6. content: " ";

7. display: block;

8. position: absolute;

9. top: -10px;

10. left: 0;

11. height: calc(100% + 10px);

12. width: 100%;

13. background-color: rgb(230, 230, 230);

14. border: 2px dotted rgb(200, 200, 200);

15. border-radius: 5px;

16. }

17. img:after {

18. content: "\f127"" Broken Image of " attr(alt);

19. display: block;

20. font-size: 16px;

21. font-style: normal;

22. font-family: FontAwesome;

23. color: rgb(100, 100, 100);

24. position: absolute;

25. top: 5px;

26. left: 0;

27. width: 100%;

28. text-align: center;

29. }

如果图片没有破裂，伪元素根本不会生成，图片还能正常显示。

1. <imgsrc="/content/images/2016/02/Screen-Shot-2016-02-27-at-12-42-08.png"alt="Image not broken">

浏览器兼容性

不幸的是，并非所有浏览器都以相同的方式处理损坏的图片。对于某些浏览器，即使图片没有显示，伪元素也不会显示。

四年前的测试结果，现在应该会有所变化。

下面，是我的测试结果：

* 只有在图片的宽度足够大时，alt 文本才会显示出来。如果没有为 <img>  指定宽度，alt 文本可能根本就显示不出来。

** 设置的字体样式无效。

对于不支持伪元素的浏览器，所应用的样式将被忽略，因此不会造成破坏性干扰。这表示着我们仍然可以上面的样式方案，并在支持的浏览器上为用户提供更愉快的体验。

关于本文 译者：@zhangbao90s 译文：https://juejin.im/post/5e2fa68ae51d45580329be17 作者：@Ire Aderinokun 原文：https://bitsofco.de/styling-broken-images/

为你推荐