圖片無法載入的情況下的優化

zyan發表於2019-02-16
優化

圖片無法載入的情況

我們在專案裡總會碰到一些圖片無法載入的情況，無論是圖片有地址沒有載入成功還是圖片沒有地址都會出現預設的那個圖片破裂的情況。我們可以通過偽元素的方式對這種情況進行處理。

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一樣

一些問題

  1. 在實踐的過程中發現，當img的alt屬性存在且圖片無法載入時，img設定的寬度和高度不生效。
  2. 可以單獨給偽元素的寬度和高度設定固定的數值

相關文章