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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM