圖片沒法加載的狀況下的優化

時間 2019-12-04

標籤圖片沒法加載狀況優化简体版

原文原文鏈接

圖片沒法加載的狀況

咱們在項目裏總會碰到一些圖片沒法加載的狀況，不管是圖片有地址沒有加載成功仍是圖片沒有地址都會出現默認的那個圖片破裂的狀況。咱們能夠經過僞元素的方式對這種狀況進行處理。html

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>