de imagen vue-lazyload carga diferida plug-ins

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 (...)

Publicado 54 artículos originales · ganado elogios 8 · Vistas a 70000 +

Supongo que te gusta

Origin blog.csdn.net/yang295242361/article/details/104699682
Recomendado
Clasificación