小程序图片404错误,更换默认图片(wepy)

自定义组件实现,上代码

//fun-img.wepy
<style lang="scss">
.fun-img{
  overflow: hidden;
}
</style>
<template>
  <image
  class="fun-img"
  :src="url"
  :mode="mode"
  :lazy-load="lazyLoad"
  :webp="webp"
  binderror="bindImgError"
  @click="_onClick"
  :style="{width:width,height:height,borderRadius:borderRadius}"
  ></image>
</template>
<script>
  import wepy from '@wepy/core'
  wepy.component({
    props: {
      src: {
        type: String,
        required: true
      },
      mode: {
        type: String,
        default: 'scaleToFill'
      },
      borderRadius: {
        type: String,
        default: '0px'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      webp: {
        type: Boolean,
        default: false
      },
      lazyLoad: {
        type: Boolean,
        default: false
      }
    },
    data: {
      url: ''
    },
    ready() {
      this.url = this.src
    },
    methods: {
      bindImgError: function (e) {
        // 可以考虑上报图片资源加载失败的情况
        this.url = '/static/placehold.jpg'
      },
      _onClick () {
        this.$emit('click')
      }
    }
  })
</script>

使用

<fun-img class="thumb" :src="product.ImgPath"></fun-img>

另外一种不需要自定义组件的方式,也可以用链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值