vue项目中图片懒加载时出现的问题及解决
vue图片懒加载的问题
项目中遇到一个问题，记录一下，vue项目中前期没有做图片懒加载的时候，当图片出现错误或者显示路径不对，我加了onerror事件进行错误监听并添加一张默认的图片，优化用户体验。
后期因为图片数量变多，所以加入了图片懒加载，但在懒加载中挂载时只加了loading的图片，没有加error，所以导致页面图片未正常加载的地方出现默认图片闪烁的现象，最后在挂载时加入error引入一张默认图片就好了
vue图片懒加载实现步骤
1.安装插件
npm install vue-lazyload --save-dev2.main.js中引入，挂载
import Vuelazyload from 'vue-lazyload'
Vue.use(Vuelazyload, {
error: require('../static/img/nonelive.png'),
loading: require('../static/img/nonelive.png')
})3.在渲染结构的地方把：class="lazy" data-src换成v-lazy即可
<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="图片未显示" οnerrοr="this.class="lazy" data-src='../../../static/img/nonelive.png'">vue图片懒加载踩过的坑
一个页面图片比较多的时候，需要对界面的图片进行懒加载处理，今天遇到了，做个懒加载的笔记。
1.需要安装vue的懒加载插件。
npm install vue-lazyload --save-dev2.需要在main.js里面进行引用。
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload);或者自定义
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})3.修改图片的路径，设置为懒加载的形式，将class="lazy" data-src改成v-lazy
<img v-lazy="psdimg" class="psd" />今天踩过的坑总结
当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加v-lazy-container="{selector:'img'}"
<div v-lazy-container="{ selector: 'img' }">
<img data-class="lazy" data-src="//domain.com/img1.jpg">
<img data-class="lazy" data-src="//domain.com/img2.jpg">
<img data-class="lazy" data-src="//domain.com/img3.jpg">
</div>或者这种：
<div>
v-lazy-container="{ selector: 'img' }"
class="contentDiv construction"
v-html="content">
</div>以及我将html里面的图片路径拿到后，转换成懒加载的时候，
一定是 data-class="lazy" data-src，而不是v-lazy，要不然在接口获取的时候，拿到了图片地址，但是会一直显示不出来的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
