当网页中的图片加载失败的时候，会出现一个特别丑陋的图标，对用户体验影响比较大。
概述
例如如下代码：
<img src="./none.jpg" />
默认情况下，图片加载失败的时候会出现这个图标：
这个图标是非常影响用户体验的，所以必须使用一种解决方案来解决这种问题。
解决方案
首先我们去掉这个丑陋的图标：
<img src="./none.jpg" alt="" />
给img标签加入alt属性后，当图片加载失败后，会展示那个图标和alt属性值。
当alt属性值为空的时候，那这张图片加载失败后就不会有任何的显示。
这样虽然已经去掉了图标，但是会显示一片空白，有没有更好的办法在图片加载失败的时候，给用户展示我们想展示的内容的内容呢？
答案当然是可以的。
原理
img标签的伪元素只有在图片加载失败的时候才会加载。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
position: relative;
width: 150px;
height: 100px;
}
img::before {
content: '暂无图片';
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 100px;
font-size: 12px;
color: #aaa;
background-color: aliceblue;
}
</style>
</head>
<body>
<img src="http://n.sinaimg.cn/ent/transform/20161009/wENJ-fxwrhpq6162166.jpg" alt="" />
<img src="http://n.sinaimg.cn/ent/transform/20161009/wENJ-fxwrhpq616216.jpg" alt="" />
</body>
</html>
