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

最新推荐文章于 2021-10-15 21:10:52 发布

weixin_34067102

最新推荐文章于 2021-10-15 21:10:52 发布

阅读量468

点赞数

原文链接：https://segmentfault.com/a/1190000017760513

版权

图片无法加载的情况

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

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设置的宽度和高度不生效。
可以单独给伪元素的宽度和高度设置固定的数值

weixin_34067102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无法加载的情况下的优化

图片无法加载的情况我们在项目里总会碰到一些图片无法加载的情况，无论是图片有地址没有加载成功还是图片没有地址都会出现默认的那个图片破裂的情况。我们可以通过伪元素的方式对这种情况进行处理。img的情况<!DOCTYPE html><html lang="en"> <head> <m...
复制链接

扫一扫