vue:踩坑-图片懒加载 vue-lazyload

一：初步使用
0. 首先下载插件并引入插件

npm install vue-lazyload 

import VueLazyload from 'vue-lazyload'

1.最容易出现路径的问题 // 这里只准对vue-cli3.X说明
1）如果loadding和error图片是放在assets下，那就得这样引入了

Vue.use(vueLazyload, {
  attempt: 1,
  loading: require('../assets/img/loading.gif'),
  error: require('../assets/img/error.png')
})

2）而如果图片放在public下那就得这样用了

Vue.use(vueLazyload, {
  attempt: 1,
  loading: './img/loading.gif',
  error: './img/error.png'
})

// 如果不信那你就试下这个链接：链接

2. 路由懒加载访问不到图片
   
   // 解决
   

3. 永远记住一句话
   在vue-cli3.X的项目中 public目录代表的就是localhost:8080下

   而在vue-cli2.X的项目中 dist目录才是静态资源目录
   
   转发vue-cli静态文件导入方式：链接

4. 为图片使用懒加载

<img v-lazy="img.src" >

最终在页面中会生成这种格式

   <img
     data-v-a937c7ca
     alt
     data-src="http://192.168.1.99:8195/File\Focus\7dd0cc66-55cb-494f-9655-57aa8c50dc34"
     src="http://192.168.1.99:8195/File\Focus\7dd0cc66-55cb-494f-9655-57aa8c50dc34"
     lazy="loaded"
   />

二：局部使用

有这么一个需求：列表页图片加载（加载失败有默认的图片），单个页面加载的图片有单独的加载的h失败图片

//main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

<template>
<img v-if="imgObj.src" ref="imgRef" v-lazy="imgObj" :class="showDeault?'default':''" alt />
</template>

<script>
export default {
	data:(){
	  return:{
	  	  showDeault: false,
	      imgObj: {
	        src: '',
	        loading: require('./loading.gif'),
	        error: require('./default-pointsRules.png')
	      }
	  }
	},
	mounted(){
		 this.$Lazyload.$on('error', () => {
	      this.$set(this, 'showDeault', true)
	    })
	    this.$Lazyload.$on('loading', () => {
	      this.$set(this, 'showDeault', true)
	    })
  }
}
</script>