一:安装
cnpm install vue-lazyload -D
二:main.js入口 引用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, { //参数设置
preLoad: 1.3,
error: require('@/assets/error.jpg'),
loading: require('@/assets/timg.gif'),
attempt: 1
})
三:组件中使用 : 只要把 src 更换成 v-lazy 即可
<template>
<div class="hello">
<img v-for="item in img" v-lazy="item" width="100" height="100">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
img:[
require('@/assets/logo.png'),
require('@/assets/logo.png'),
require('@/assets/logo.png'),
]
}
}
}
</script>
特别注意:图片地址引用 一定使用 require(...)