vue3图片懒加载 插件
时间: 2023-11-07 15:59:39 浏览: 102
可以使用vue-lazyload插件来实现图片懒加载。
安装:
```
npm install vue-lazyload --save
```
使用:
main.js中引入:
```javascript
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
```
在模板中使用:
```html
<template>
<div>
<img v-lazy="imgUrl">
</div>
</template>
```
其中imgUrl为需要懒加载的图片地址。可以在图片未显示时显示loading图片,也可以设置error图片:
```html
<template>
<div>
<img v-lazy="imgUrl" :loading="loadingImg" :error="errorImg">
</div>
</template>
```
另外,插件还提供了一些配置项,例如设置预加载高度、加载失败时重试次数等:
```javascript
Vue.use(VueLazyload, {
preLoad: 1.3, // 预加载高度比例
error: 'error.jpg', // 加载失败时显示的图片
loading: 'loading.gif', // 加载时显示的图片
attempt: 3 // 加载失败时重试次数
})
```
更多配置项请查看官方文档。
阅读全文