【vue】图片懒加载 vue-lazyload 使用

fruge365

发布于 2025-12-15 10:19:37

1970

前言

图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload。

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.引入库

npm install vue-lazyload

2.main.js中全局注册

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1,
  error: require('./assets/img/error.jpg'),
  loading: require('./assets/img/homePage_top.jpg'),
  attempt: 2,
})

3.项目中使用

img标签中使用懒加载：v-lazy 代替 :src,使用时最好给一个 key 属性，即：

<img v-lazy="图片地址" :key="图片地址">

如果使用v-lazy报错，不妨把:key加上看看

4.最后

附上项目地址：vue-lazyload

下班~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

error

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

【vue】图片懒加载 vue-lazyload 使用

【vue】图片懒加载 vue-lazyload 使用

前言

一、使用步骤

1.引入库

2.main.js中全局注册

3.项目中使用

4.最后

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐