vue-lazyLoad遇到的一些问题

Vue.use(VueLazyLoad,{

preLoad:1,

error:'./static/error.png',

loading:‘./static/img/a.jpg’

})

1 图片高度设置问题：

如果直接使用，没有设置任何参数。你可能会遇到图片无法展示的问题。你可以试着给图片设置一个高度。然后就会出现惊喜。

2 loading 图片如何设置大小？

如果你想在图片未加载出来之前设置一个loading的效果。你 可以这样设置：

Vue.use(VueLazyLoad,{

    preLoad:1,

    error:'./static/error.png',

   loading:‘./static/img/a.jpg’（这里可以是本地图片也可以是一个远程地址）

})

但是与此同时问题又来了。你会发现。这个loading的图片要么太大，或者要么又太小，如果设置它的样式呢？你只需要做如何设置：

<div v-for='(item,index) in arr' :key='index' @click='goDetail(item)' class='pic'>

<img v-lazy='item.url' alt="" class='imgBlock'>

</div>

<style>

img[lazy="loading"]{width:80px;height:80px;} //设置加载图片时候loading的图片大小

 </style>

3 如何根据不同企业当加载不同图片的时候显示不同logo？

有时候你的业务或者比较复杂。你的网站要根据不同的客户做定制化。然后不同的客户进入以后，在图片加载这一块，图片未出现之前的loading需要展示客户的logo，这时候我们其实可以根据不同的条件，比如可以根据客户的url地址来判断。然后动态的设置loading的值，loading的值不再是一个具体的图片地址，而是一个函数返回的值。这个值可以返回不同的企业的logo

const getPath=()=>{

let siteUrl=window.location.href

let baseURL='http://www.oigin.com';

let imgPath=''

if(siteUrl=='xiaomi'){

imgPath=`${baseURL}/static/img/a.gif`

return imgPath

}else{

imgPath=`${baseURL}/static/img/b.gif`

return imgPath

}

}

然后在main.js中如下使用

import VueLazyLoad from 'vue-lazyload'

getPath()

Vue.use(VueLazyLoad,{

preLoad:1,

error:'./static/error.png',

loading:getPath(a)

})