vue img标签图片加载时 闪烁

时间:2021-05-17 07:01:23
//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>