解决img的src属性为空时会有边框的情况

Posted zzh0318

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决img的src属性为空时会有边框的情况相关的知识，希望对你有一定的参考价值。

　　今天在做一个app项目的时候，遇到了这样一个问题，在给定一个img标签固定宽高的情况下，当img标签中的src属性为空时，这块img区域会有边框包围着，导致了当进入一个页面时，图片会先闪一下边框，然后图片才呈现出来，可能是连通接口的速度不是很快，而在得到图片路径之前img标签的src属性还是初始为空状态，所以加载页面之后会闪一下边框。

技术图片          技术图片

上面左图在红色边框的盒子内的就是src为空时的图片的样子。右图是图片正常显示的样子。

解决方式很简单，只需在css中添加一行代码即可：

img[src=""]{
  opacity: 0;
}

加入之后就不会再有边框出现。

技术图片

 以vue为例的完整代码如下：

<!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>Document</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <style>
    #app{
      border: 1px solid red;
      width: 600px;
      height: 400px;
      overflow: hidden;
    }
    #app img{
      display: block;
      width: 300px;
      height: 200px;
      margin: 100px 150px;
    }
    img[src=""]{
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <img :src="picUrl">
  </div>

  <script>
    var app = new Vue({
      el: ‘#app‘,
      data: {
        picUrl: ‘‘,
      },
      mounted() {
        // this.picUrl = "http://b-ssl.duitang.com/uploads/item/201508/29/20150829234640_hVuCa.thumb.700_0.jpeg";
      },
    })
  </script>
</body>
</html>

以上是关于解决img的src属性为空时会有边框的情况的主要内容，如果未能解决你的问题，请参考以下文章

img标签添加背景图，会有边框

原生js实现图片懒加载

为啥在获取 Users.ToListAsync() 不为空时会出现 SqlNullException

Spring - 仅当值不为空时才设置属性

spring boot加mybatis使用Map返回时，当值为空时属性也会没有（转）

仅在选中且不为空时才显示元素