小程序圖片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>

另外一種不需要自定義組件的方式，也可以用鏈接