图片无法加载情况下的优化
2019-01-04 本文已影响15人
风灵子偌
图片无法加载的情况
我们在项目里总会碰到一些图片无法加载的情况，无论是图片有地址没有加载成功还是图片没有地址都会出现默认的那个图片破裂的情况。我们可以通过伪元素的方式对这种情况进行处理。
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>
background
与img一样
一些问题
- 在实践的过程中发现，当img的alt属性存在且图片无法加载时，img设置的宽度和高度不生效。
- 可以单独给伪元素的宽度和高度设置固定的数值
