[译] 给破碎图片添加样式_zhangbao90s的专栏文章_微信文章

原文链接：Styling Broken Images，by Ire Aderinokun

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

<img src="http://bitsofco.de/broken.jpg" alt="This image is broken! Ugly, isn’t it?">
复制代码

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

`<img>` 元素上的两个事实

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

我们可以在 <img> 元素上使用常规的排版相关样式。 这些样式会被应用到替换文本上（即 alt 属性值），如果图片正常显示了，这些样式也不会影响图片的渲染。
<img> 元素是替换元素。 这就表示“该类元素的外观和尺寸是受到外部资源控制的”（Sitepoint）。因为元素是受到外部资源控制的，因此 ::before、::after 伪元素的样式并不会影响图片渲染。然而，当图片因为地址无效或网络等原因加载失败后，伪元素就出现了。

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

撸代码

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

<img src="http://bitsofco.de/broken.jpg" 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 { /* 样式跟第一个例子里是一样的 */ }

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 { 
  /* 样式跟第一个例子里是一样的，然后加了下面一条样式 */
  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;
}
复制代码

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

<img src="/content/images/2016/02/Screen-Shot-2016-02-27-at-12-42-08.png" alt="Image not broken">
复制代码

浏览器兼容性

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

下面，是我的测试结果：

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

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

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

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）

[译] 给破碎图片添加样式