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> |