nuxt 使用vue-lazyload

1.安装

npm install vue-lazyload -D(或者yarn add vue-lazyload -D)

2.在plugins下新建vue-lazyload.js

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比
  error: require('~/assets/loadError.gif'), // 图片加载失败时使用的图片源
  loading: require('~/assets/loading.gif'), // 图片加载的路径
  attempt: 1 // 尝试加载次数
})

图片在assets目录下用require引入,在static下可以用相对路径引入

3.在nuxt.config.js的plugins下面引入

{ src: "~/plugins/vue-lazyload.js" ,ssr: false}

4.使用:图片的src换成v-lazy,注意:一定要绑定key,不然翻页的时候可能图片不会变

1
2
3
<div v-for="img in imgs" :key="img.id">
  <img v-lazy="img.url" >
</div>