vueLazyload 图片懒加载

安装 npm install vue-lazyload --save

在main.js全局引入

//使用默认配置
Vue.use(VueLazyload)
 
// 自己配置参数
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

使用

<div class="icon">
    <img :key="url" v-lazy="url">
</div>

 

 有一点需要注意  图片的宽高设置需要注意 （不要直接在图片标签上设置宽高，或者图片设置一个样式  给该样式设置宽高 这样的话图片会变形的）  可用方案可以外面套一个div   设置css样式 .icon img {width:宽度;height:高度;}

这里主要原因是 vue-layload 可能会替换我们的img标签 导致样式丢失