VUE图片懒加载教程

最新推荐文章于 2024-04-23 18:09:29 发布

灿烂的小火炬

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量143

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_44630724/article/details/116802740

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中实现图片懒加载。首先通过npm安装vue-lazyload依赖，然后在main.js中引入并配置错误及加载占位图。最后，将img标签替换为v-lazy指令，轻松完成图片的懒加载功能。

摘要由CSDN通过智能技术生成

VUE图片懒加载教程

1.安装依赖

npm install vue-lazyload --save

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
	error: './assets/img/error.png',
	loading: './assets/img/lazy.gif',
})

//error   是懒加载后，找不到图片时才会显示的图片
//loading 是未加载图片时，显示的图片