图片没法加载的状况下的优化

时间 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>

background

与img同样测试

一些问题

在实践的过程当中发现，当img的alt属性存在且图片没法加载时，img设置的宽度和高度不生效。
能够单独给伪元素的宽度和高度设置固定的数值