vue图片懒加载

1、项目中有页面图片较多，可以使用图片懒加载 优化性能，提高用户体验，当图片到达视图区域再加载；
解决步骤：
第一：下载第三方插件 cnpm i vue-lazyload --save-dev
第二：再main.js里面引入import VueLazyload from ‘vue-lazyload’
第三：Vue.use(VueLazyload)使用

或者自定义：
Vue.use(VueLazyload, {
preLoad: 1.3,
error: ‘dist/error.png’,
loading: ‘dist/loading.gif’,
attempt: 1
})
具体代码：

<template>
  <div class="hello">
<img v-lazy=imgurl alt="" />
  </div>
</template>
<script>
	import Clipboard from 'clipboard';
export default {
  name: 'HelloWorld',
  data () {
    return {
      imgurl:require("../../build/logo.png"),//图片路径
    }
  },
}
</script>
<style scoped>
	img{
		width:100px;
		height:100px;
		background: red;
	}
	input{
		border:0;
		outline: none;
	}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>