vue3-img-lazy v1.0.1

Vue3图片懒加载指令

示例

index.vue

<template>
  <div>
    <div v-for="src in arrs" :key="src">
      <img alt="img" v-lazy="src">
    </div>
  </div>
</template>

<script setup lang="ts">
const arrs = [
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/banner1.png",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/banner2.png",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-service-01.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-service-02.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-service-03.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-service-04.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-service-05.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-advantage-01.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-advantage-02.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-advantage-03.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/index-advantage-04.jpg",
  "https://attachment-file.hkeasyspeed.com/official_website/cn/images/footer_bg.jpg",
  "https://media-file.hkeasyspeed.com/2022/10/07/8b8314793608f1fead79f36bf71450b6.png"
];
</script>

<style>

</style>

main.ts

// 此处省略
app.use(vLazy, {
    // loadingSrc: '加载时的图片路径'
})