v-lazyload插件使用不同的默认图片

Question

在vue项目中使用v-lazyload 看官网是在main.js里面配置v-lazyload的默认图片和loading图片

想问下，在我的业务中，不用总使用同一张默认图片，问下如何在项目中配置，或者在对应元素下配置别的默认图片（error图片）

Answer 1

vue-lazyload？

文档

<!-- with customer error and loading -->
<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>
data () {
  return {
  imgObj: {
    src: 'http://xx.com/logo.png',
    error: 'http://xx.com/error.png',
    loading: 'http://xx.com/loading-spin.svg'
  },
  imgUrl: 'http://xx.com/logo.png' // String
 }
}

---

v-lazy:background-image="{src: item.src, error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg'}"

或者

v-lazy:background-image=getImgObj(item.src)
做一个getImgObj函数去处理

Answer 2

还没用过这个插件

看楼上的可以传对象就ok了

如果不能的话 你可以吧这个指令源码改造一下 做成一个组件自己调用吧