图片无法加载的情况下的优化

2024年3月9日 152次阅读 来源: zyan

图片无法加载的情况

我们在项目里总会碰到一些图片无法加载的情况，无论是图片有地址没有加载成功还是图片没有地址都会出现默认的那个图片破裂的情况。我们可以通过伪元素的方式对这种情况进行处理。

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. 可以单独给伪元素的宽度和高度设置固定的数值
    原文作者：zyan
    原文地址: https://segmentfault.com/a/1190000017760513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞