vue3 图片懒加载

以下是使用Vue3实现图片懒加载的方法：

1.安装vue3-lazyload插件

npm install vue3-lazyload --save

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

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

const app = createApp(App)

app.use(VueLazyload, {
  loading: '加载中...', // 图片加载过程中显示的文本
  error: '加载失败', // 图片加载失败时显示的文本
})

3.在需要懒加载的img标签上使用v-lazy指令

<template>
  <div>
    <img v-lazy="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '需要懒加载的图片地址'
    }
  }
}
</script>

相关问题

vue3图片懒加载 插件

可以使用vue-lazyload插件来实现图片懒加载。

安装：

npm install vue-lazyload --save

使用：

main.js中引入：

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

在模板中使用：

<template>
  <div>
    <img v-lazy="imgUrl">
  </div>
</template>

其中imgUrl为需要懒加载的图片地址。可以在图片未显示时显示loading图片，也可以设置error图片：

<template>
  <div>
    <img v-lazy="imgUrl" :loading="loadingImg" :error="errorImg">
  </div>
</template>

另外，插件还提供了一些配置项，例如设置预加载高度、加载失败时重试次数等：

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: 'error.jpg', // 加载失败时显示的图片
  loading: 'loading.gif', // 加载时显示的图片
  attempt: 3 // 加载失败时重试次数
})

更多配置项请查看官方文档。

vite+vue3图片懒加载 插件

可以使用vue3-lazyload插件进行图片懒加载。

安装：

npm install vue3-lazyload

使用：

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

const app = createApp(App)

app.use(VueLazyload, {
  loading: '/loading.gif', // 占位图
  error: '/error.jpg' // 加载失败图
})

app.mount('#app')

在需要使用懒加载的图片上添加`v-lazy`指令即可：

<template>
  <img v-lazy="'/img/lazy.png'" alt="">
</template>