1, 安装图片懒加载模块
npm install vue3-lazy --save /yarn add vue3-lazy
2, 在main.js入口文件中引入图片懒加载模块
import VueLazyLoad from 'vue3-lazy'
createApp(App).use(VueLazyLoad,{
loading: require("@/assets/holder.png")
})
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可
<img v-lazy="roomData.room_src" alt="">
vue3图片懒加载
最新推荐文章于 2023-08-12 16:56:48 发布
该文章介绍了如何在Vue3项目中实现图片懒加载。首先，通过npm或yarn安装vue3-lazy模块。然后，在main.js入口文件中引入并配置VueLazyLoad，设置默认加载图片。最后，在组件中使用v-lazy指令替换img标签的src属性以实现懒加载功能。
扫一扫
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
