样式化加载失败的图片
本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动，望读者见谅
加载失败的图片是比较丑陋的，比如
但是我们可以让结果变得更美好。通过给
![]()
元素设置CSS相关属性可以实现更美的呈现。
IMG元素你需要知道的两点知识
我们可以针对IMG元素设置排版相关的CSS样式（诸如font等属性）。一旦IMG的可替换文本（即alt属性）出现，则设置的CSS样式应用于这些文本；
IMG元素属于可替换元素（可替换元素是指元素的外观和大小受外部源所影响，常见的可替换元素如IMG，OBJECT，INPUT，TEXTAREA等）。正由于可替换元素收外部源的影响，因此CSS中的伪元素::before、::after对它不起作用。但是，一旦图片加载失败，伪元素就可作用于图片之上。
理解了上述两点，我们就可以用CSS实现一个特殊的功能：
当图片正常加载时无需处理，而当加载失败时让图片应用一些特殊的样式，以达到更好的用户体验效果。
实践
采用如下的实例代码：
<img src="" alt="休要胡说">
添加CSS样式
一旦图片加载失败，我们需要向用户提供相关文案，这就用到了CSS的attr函数
示例代码：
img {
font-family: 'STKaiti';
font-weight: 300;
line-height: 2;
text-align: center;
width: 100%;
height: auto;
display: block;
position: relative;
}
img:before {
content: "抱歉，图片加载失败 :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
替换alt文本
为了让加载失败的图片呈现更为美观，采用伪元素来进行绝对定位，更自由的控制表现。
img { /* Same as first example */ }
img:after {
content: "\f1c5" " " attr(alt);
font-size: 16px;
font-family: FontAwesome;
color: rgb(100, 100, 100);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}
添加额外的样式
利用伪元素可以添加更多的额外样式：
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;
}
正如第二节所说，如果图片正常加载，那么伪元素中设置的所有样式都不会被作用，因此这种方式作为一种backup，是非常有效的。
兼容性
不幸的是不是所有的浏览器都会这样处理应用在IMG元素上的伪元素。这是我整理的兼容性表格：
* alt文本自由在图片的宽度足够容纳下它时才会显示，如果图片没有宽度，alt文本压根不会显示
** 字体样式不会起作用
译者注：
其实，针对IMG元素设置伪元素是非常好的一种backup方案，即使针对某些不支持该特性的浏览器而言也是没有副作用。因此在通常针对IMG元素使用base64占位符的实现下，尝试另外一种风格的实现也未尝不可。这样不仅仅减少了许多代码量，而且保证了全站图片加载失败所呈现的一致性。
posted @
相关文章
精彩导读
热门资讯
关注我们
