vue3 图片懒加载,Vue组件懒加载
摘要：本文主要介绍了vue项目中图片延迟加载的问题及解决方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue图片懒人加载问题vue图片懒人加载实现步骤vue图片懒人加载踩坑汇总今日踩坑
vue图片懒加载的问题
我在项目中遇到了一个问题。我们来记录一下，vue项目中前期没有偷懒加载图片的时候，图片出现错误或者显示路径错误的时候，我添加了onerror事件来监控错误，添加了默认图片来优化用户体验。
因为后期图片数量增加，所以增加了图片的懒加载。但是在懒加载中，只增加了加载图片，没有增加错误。结果默认图片在页面上图片不能正常加载的地方闪烁。最后，最好在加载时添加错误以引入默认图片。
vue图片懒加载实现步骤
1.安装插件
npm安装vue-lazyload -保存-开发
2.main.js中引入，挂载
从“vue-lazyload”导入Vuelazyload
Vue.use(Vuelazyload，{
错误：要求(./static/img/nonelive.png )，
正在加载：需要(./static/img/nonelive.png )
})
3.在渲染结构的地方把：src换成v-lazy即可
img v-lazy=item.pictureUrl？ Item.picture URL:./././static/img/nonelive.png alt=不显示图片nerror= this . src=././static/img/nonelive.png
vue图片懒加载踩过的坑
当一个页面上有很多图片的时候，就需要在界面上懒加载图片。今天遇到他们了，记下懒装。
1.需要安装vue的懒加载插件。
npm安装vue-lazyload -保存-开发
2.需要在main.js里面进行引用。
从“vue-lazyload”导入VueLazyload
vue . use(VueLazyload)；
或者定制。
Vue.use(VueLazyload，{
预载荷：1.3，
错误： dist/error.png ，
正在加载： dist/loading.gif ，
尝试：1
})
3.修改图片的路径，设置为懒加载的形式，将src改成v-lazy
img v-lazy=psdimg class=psd /
今天踩过的坑总结
当遇到v-for循环或用div包装img时，需要将V-lazy-container= { selector: IMG } 添加到div中。
divv-lazy-container= { selector: img }
img data-src=//domain . com/img 1 . jpg
img data-src=//domain . com/img 2 . jpg
img data-src=//domain . com/img 3 . jpg
/div
或者这个：
差异
v-lazy-container= { selector: img }
class= contentDivconstruction
v-html=内容
/div
当我获得html格式的图片路径并将其转换为延迟加载时，
必须是data-src，而不是v-lazy。否则，在获取接口时，会获得图像地址，但永远不会显示。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。