图片无法加载的情况下的优化

21次阅读

共计 645 个字符，预计需要花费 2 分钟才能阅读完成。

图片无法加载的情况
我们在项目里总会碰到一些图片无法加载的情况，无论是图片有地址没有加载成功还是图片没有地址都会出现默认的那个图片破裂的情况。我们可以通过伪元素的方式对这种情况进行处理。
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> 测试 img 无法加载的情况 </title>
<style>
img {
position: relative;
width: 1000px;
height: 800px;
}
img::after {
background: url(‘./image/1.jpg’) no-repeat;
background-size: cover;
content: ”;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<img src=”./image/5.jpg” />
</body>
</html>