圖片無法加載的情況
我們在項目里總會碰到一些圖片無法加載的情況颅悉，無論是圖片有地址沒有加載成功還是圖片沒有地址都會出現(xiàn)默認(rèn)的那個圖片破裂的情況沽瞭。我們可以通過偽元素的方式對這種情況進(jìn)行處理迁匠。
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一樣
一些問題
- 在實踐的過程中發(fā)現(xiàn)，當(dāng)img的alt屬性存在且圖片無法加載時驹溃，img設(shè)置的寬度和高度不生效城丧。
- 可以單獨(dú)給偽元素的寬度和高度設(shè)置固定的數(shù)值
