VUE3.X实现Swiper6轮播图懒加载

使用：vue3-lazyload实现懒加载，GitHUb地址：https://github.com/murongg/vue3-lazyload；

第一步：安装

cnpm i vue3-lazyload

第二步：全局引入

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyLoad from 'vue3-lazyload'

const app = createApp(App)
app.use(VueLazyLoad, {
  // options...
})
app.mount('#app')

第三步：组件中使用

XXX.VUE1中使用如下：

<template>
  <!--image是图片地址-->
  <img v-lazy="image" style="width: 100%; height: 200px">
</template>

v-lazy是对象参数：

<template>
  <!--images是图片对象-->
  <img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your erro