安装: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>