vue img标签图片加载时 闪烁

普通写法出现的图片闪烁

//js
data(){
    return{
        img_url: '',
    }
},
created(){
　　//请求数据，并给图片赋值url
　　ajax.get(http_url)
　　.then(res=>{
　　　　this.img_url = res.data.img_url;
　　})
　　.catch(error=>{
　　})　　
}

　<-- html -->

<div>
 　　<img :src="img_url">
</div>

绑定的 :src=“img_url” 初次加载闪烁 然后在父元素添加了v-cloak

加载时 在图片正常显示之前还是会显示加载出错的默认图片

因为此时的img_url为空 所以就在父元素 加上 v-if=“img_url” 完美解决

<div v-if="img_url">
    <img :src="img_url">
</div>

或

 <div v-if="img_url">
    <img :src="img_url" ：onerror=“defaultImg”>
</div>