R: instalar
CNPM instalar vue-lazyload -D
Dos: main.js entrada referencias
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, { //参数设置
preLoad: 1.3,
error: require('@/assets/error.jpg'),
loading: require('@/assets/timg.gif'),
attempt: 1
})
III: Componente utilizado: siempre que el src se puede cambiar a 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>
Nota especial: Las referencias de dirección de imagen deben utilizar require (...)