uni-app显示图片,加载失败时显示占位图兼容h5/app/微信小程序

百度了各种方法，试了各种技巧，在h5/app/小程序都试验过了，最终产生以下的干货

1.使用image标签，@error=""写法
2.在小程序会报错：[渲染层网络层错误] Failed to load local image resource，要加一个wx:if判断

<view class="box-item" v-for="(item,index2) in list" :key="index2" >
  <view class="img_box">
      <!-- #ifndef MP-WEIXIN -->
      <image :src="item.photoUrl" alt="" @error="onImageError('list',index2)"  />
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <image wx:if="{{item.photoUrl}}" :src="item.photoUrl" alt="" @error="onImageError('list',index2)"  />
      <!-- #endif -->
    </view>
</view>

3.以绝对路径的方式引入占位图再定义，因为uni-app不支持相对路径，在数据定义里引入的话，只有app能显示，h5和小程序显示不了。

  import defaultImg from "@/assets/img/image1.png"

data() {
      return {
        defaultImg: defaultImg,
  }

onImageError(dataArray,index){
   this[dataArray][index].photoUrl = this.defaultImg
},