图片懒加载vue

这里只能实现图片的懒加载，不能实现其他的懒加载。

加载插件：

npm install vue-lazyload --save

在main.js中写入插件

// 图片懒加载
import VueLazyload from "vue-lazyload";
const app = createApp(App)
app.use(VueLazyload,{
    preLoad: 1.3,
    error:'@/assets/images/error.png',
});

实现：

<template>
    <div class="aaa">
        <img v-lazy="img1" class="img" />
        <img v-lazy="img2" class="img" />
        <img v-lazy="img3" class="img" />
        <img v-lazy="img4" class="img" />
        <img v-lazy="img5" class="img" />
    </div>
</template>
<script setup>
import img1 from '../../assets/images/1.png'
import img2 from '../../assets/images/2.png'
import img3 from '../../assets/images/3.png'
import img4 from '../../assets/images/4.png'
import img5 from '../../assets/images/5.png'

</script>
<style>
.aaa {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.img {
    width: 400px;
}
</style>