- 在项目中安装模块 vue-lazyload 模块
npm install vue-lazyload --save
- 在 main.js 中 导入该模块并配置使用
import VueLazyload from 'vue-lazyload'const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/logo.png')Vue.use(VueLazyload , {preLoad: 1.3,error: errorimage,loading: loadimage,attempt: 1
})
- 在组件中使用 （如果报错， 注意看第四步）
<template><div><h1>img_懒加载</h1>修改图片的路径，设置为懒加载的形式，将src改成v-lazy<h1>一张图片</h1><img v-lazy="aaa"><h1>图片列表 li>img </h1><ul><li v-for="(img, index) in img_list" :key="index"><img v-lazy="img"></li></ul><h1> div>img </h1><div v-lazy-container="{ selector: 'img' }"><!-- 不能再用 v-lazy 了， 只能用 data-src 替换 --><img v-lazy="img_list[0]"><img :data-src="img_list[1]"><img :data-src="img_list[2]"></div></div>
</template><script>
export default {data() {return {aaa: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.utuku.imgcdc.com%2F650x0%2Fent%2F20220822%2F7fa922ec-8177-462e-92b6-f013e7d0317f.jpg&refer=http%3A%2F%2Fimg1.utuku.imgcdc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=ca1b85bb7c5cd10a6bcb3adc4d6304d4",img_list: ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.utuku.imgcdc.com%2F650x0%2Fent%2F20220822%2Fa1f8ba9e-0061-4738-861a-0f64e24d4656.jpg&refer=http%3A%2F%2Fimg3.utuku.imgcdc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=19dd99632ed17e12f681fe3b611c7427","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F0079Rneply1h5ir0i5fijj30sg15e0yt.jpg&refer=http%3A%2F%2Fwx3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=b2b54e7c0f61ee29dafbb156e58236f2","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Fmw690%2F00894mOqly1h5eg3rqfw7j32g63cshdv.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=082e6b0aa3d4a82aeab7ebc9ce9f978c","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F007edoMely1h5jfoujf3dj311g1dxqcx.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=0aed6398399696859b93aa6141f97760","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg0.utuku.imgcdc.com%2F650x0%2Fent%2F20220819%2Fb1fd7b99-43bc-4d33-8555-3020f37d5f32.jpg&refer=http%3A%2F%2Fimg0.utuku.imgcdc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=ac3c4f1ebd7b47351a8ede5018c6264a","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg0.utuku.imgcdc.com%2F650x0%2Fent%2F20220822%2F45983042-c645-436a-9bde-43e14d813f80.jpg&refer=http%3A%2F%2Fimg0.utuku.imgcdc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=ca875094509273c0f08814643df69849","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F16%2F20200516144231_2AV3y.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=9f47f0e6e66227541ce9fc41c781fa6a","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F09%2F20200309212857_NAPAP.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664097306&t=e894a74fe0dc680b887036d2afae5d45"]}}
}
</script>
- 如果在使用中 报错 如下图所示：
是因为该模块版本问题， 可安装低版本的 vue-lazyload 来解决该问题
# 先写在原有的安装
npm uninstall vue-lazyload --save# 再安装低版本的
npm install vue-lazyload@1.3.3 --save
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
