图片懒加载

原创于 2023-06-08 17:33:32 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

文章介绍了如何在Vue项目中安装并使用vue-lazyload插件进行图片懒加载。首先，由于安装最新版可能出现问题，建议安装指定版本1.3.3。然后，在main.js中引入模块并配置加载占位图。最后，在组件中使用v-lazy指令实现图片的懒加载功能。

1, 安装图片懒加载模块
(安装最新版的会报错安装指定版本)
   cnpm install vue-lazyload@1.3.3 --save
2, 在main.js入口文件中引入图片懒加载模块
   import VueLazyLoad from 'vue-lazyload'
   Vue.use(VueLazyLoad,{
       loading: require("@/assets/holder.png")
   })
3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可
   <img v-lazy="roomData.room_src" alt="">