vue图片懒加载

安装：npm install vue-lazyload

使用：import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
        error: 'img/none.png',  出错时的默认图片。相对路径，相对于当前引入文件的位置
        loading: 'img/none.png',  没有加载出来时的图片
    });

如果是上面图的位置。我们可以看到plugin.js的相对路径是../../assets/none.png

 

可以把这些内容扔在一个全局的plugin.js里面然后在mian.js页面引入

import plugin from "@/common/js/plugin"
Vue.use(plugin)

 

每个页面都可以使用啦。

 

例子：

<img v-lazy="imgurl"  />

 

data:{

  imgurl:'xx.png'

}

 

或者是用在背景图片上

<div v-lazy:background-image="db.pic"  style="height:200px">  //没有写url的注意注意，并且一定要加高度啊。否则就不显示。

渲染出来的效果是：   <div v-bind:style="{'background-image':'url('+db.pic+')'}"></div>