图片加载失败样式美化

图片加载失败的样式是比较丑的

1
<img src="http://img.png" alt="加载失败">

UTOOLS1576737543889.png

可以通过添加css美化样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
img{
display: inline-block;
width: 100px;
height: 56px;
cursor: pointer;
position: relative;
}
img:after{
position:absolute;
width:100px;
height: 56px;
content:"" attr(alt);
display: flex;
justify-content: center;
align-items: center;
top:0;
left:0;
background: #eee;
background-size:100%;
}

UTOOLS1576737682180.png