vue项目中图片懒加载时出现的问题

项目中遇到一个问题，记录一下，vue项目中前期没有做图片懒加载的时候，当图片出现错误或者显示路径不对，我加了onerror事件进行错误监听并添加一张默认的图片，优化用户体验。

 

后期因为图片数量变多，所以加入了图片懒加载，但在懒加载中挂载时只加了loading的图片，没有加error，所以导致页面图片未正常加载的地方出现默认图片闪烁的现象，最后在挂载时加入error引入一张默认图片就好了

 

vue图片懒加载实现步骤：

1.安装插件

npm install vue-lazyload --save-dev

2.main.js中引入，挂载

import Vuelazyload from 'vue-lazyload'

Vue.use(Vuelazyload, {

       error: require('../static/img/nonelive.png'),

       loading: require('../static/img/nonelive.png')

})

3.在渲染结构的地方把：src换成v-lazy即可

<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="图片未显示" οnerrοr="this.src='../../../static/img/nonelive.png'">