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>
原文地址:https://www.cnblogs.com/hill-foryou/p/8464280.html