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

ypinchina
  • 271

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

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

回复
阅读 7.3k
2 个回答
toBeTheLight
  • 16.6k
✓ 已被采纳

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函数去处理
silence
  • 389

还没用过这个插件

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏