图片懒加载
安装插件
npm i vue-lazyload
在main.js中
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vuelazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload,
{ preLoad: 1.3,
error: 'dist/error.png', // 错误的图片
loading: 'dist/loading.gif', // 等待时的图片
attempt: 1
})
new Vue({
el: 'body',
components: { App }
})
实例使用:
import atm from '@/assets/1.gif'
// 引入插件
import VueLazyload from 'vue-lazyload'
//注册插件
Vue.use(VueLazyload,{
//懒加载默认的图片
loading:atm
})
// 组件使用时
<!-- 在路由跳转的时候记得带id 自定义插件v-lazy-->
<router-link :to="`/detail/${good.id}`">
<img v-lazy="good.defaultImg" />
</router-link>