今天在做一个app项目的时候，遇到了这样一个问题，在给定一个img标签固定宽高的情况下，当img标签中的src属性为空时，这块img区域会有边框包围着，导致了当进入一个页面时，图片会先闪一下边框，然后图片才呈现出来，可能是连通接口的速度不是很快，而在得到图片路径之前img标签的src属性还是初始为空状态，所以加载页面之后会闪一下边框。
上面左图在红色边框的盒子内的就是src为空时的图片的样子。右图是图片正常显示的样子。
解决方式很简单，只需在css中添加一行代码即可：
img【src=""】{
opacity: 0;
}
加入之后就不会再有边框出现。
以vue为例的完整代码如下：
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>meta name="viewport" content="width=device-width, initial-scale=1.0"
[/span>meta http-equiv="X-UA-Compatible" content="ie=edge"
[/span>title
[/span>script src=""
[/span>style
#app{
border: 1px solid red;
Width＜/span>: 600px;
Height＜/span>: 400px;
overflow: hidden;
}
#app img{
display: block;
Width＜/span>: 300px;
Height＜/span>: 200px;
margin: 100px 150px;
}
img【src=""】{
opacity: 0;
}
[/span>body
[/span>div id="app"
[/span>img :src="picUrl"
[/span>script
var app = new Vue({
el: '#app',
data: {
picUrl: '',
},
mounted() {
// this.picUrl = "";
},
})
style="color: rgba(0, 0, 255, 1)"]
