vue-lazyload遇到的坑(本地图片路径问题）

一、安装

<span style="font-size:18px;">$ npm install vue-lazyload -D</span>

二、官方链接

这里附上官方文档链接 vue-lazyload

三、注意事项

1、此处将本地图片地址改为了接口请求到的图片地址，其他同官方文档
2、图片在assets文件夹，就需要使用require（）进行引入。
3、图片在static文件夹，就可以直接写路径了

<div v-lazy-container="{ selector: 'img' }">
  <img 
    :data-src="xxx.img_url" 
    :data-error="xxx.errorimg_url">  
</div>

或者

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

以及配置中

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: ‘../static/loading.gif',
  attempt: 1
})
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: require('./assets/loading.gif'),
  attempt: 1
})

总结：vue-lazyload是在main.js文件中引入，不会被webpack进行编译，src中的文件会被webpack编译，包括assets，assets文件夹中的图片地址，会在编译过程中改变。因此vue-lazyload无法正确获得图片地址，就不能显示图片了。