uni-app小程序 @error图片错误404事件交互 $set更新数组

那一年，花开得好极了   好像专是为了你

那一年，花开得很迟       还好，有你

前言

有一天Noble问我一个问题，如果图片显示失败可以调用默认图不？回顾星宿UI的学习对于图片处理上只有一个v-if判断是否为空，放回404,403等错误信息上没有做@error

感谢

Codezeng指导

学习过程

思考

1.模拟数据图片返回403

2.v-if判断为空

3.@error处理错误图片

4.$set更新数组

实践

<template>
  <view class="content">
    <block v-for="(item,index) in image" :key="index">
      <image v-if="item == ''" :src="local" mode="widthFix"></image>
      <image v-else :src="item" @error="errorImageLoad(index)" mode="widthFix"></image>
    </block>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        image: [
          'https://cdn.frbkw.com/wp-center/uploads/2021/09/1632634088-20109261319.jpg',
          'https://cdn.frbkw.com/wp-center/uploads/2022/05/1653560315-20211818.jpg',
        ],
        local: '../../static/logo.png',
      }
    },
    onLoad() {
    },
    methods: {
      errorImageLoad(index) {
        const that = this;
        that.$set(that.image,index,that.local);
        console.log(that.image)
      },
    }
  }
</script>

<style>
</style>

知识点

哎 要是@error是变量多好，在图片错误后直接赋值默认图片。我们在代码中可以看到一个

that.$set(that.image,index,that.local);

它是更新数组，说明如下

(property) Vue.$set: { (object: object, key: string | number, value: T): T; (array: T[], key: number, value: T): T; }