img图片为null或错误时替换为静态图片

当img标签的图片获取为null或者地址不正确等报错儿显示不出时，我们将它替换为本地项目中的图片

以下是在一个循环数组中有一个头像显示，把item放在getImageSrc中进行调用处理（用来设置为null时显示默认图片），@error为img报错的方法调用

        <div class="nameArea" v-for="(item,index) in List" :key="index"">
          <div class="avatar">
            <img :src="getImageSrc(item)" @error="onAvatarError($event, item)" alt="头像">
          </div>
          <div class="self-info">
            <div>{{ item.stuName }}</div>
            <div class="time">{{ item.lastBindTime }}</div>
          </div>
        </div>

    data(){
        return{
            defaultAvatar: require('@/assets/images/threeLogo.png'),
        }
    }
    method:{
        // 头像图片为null时替换为默认头像
        getImageSrc(item) {
          return item.headImg ? `${this.baseUrl}${item.headImg}` : this.defaultAvatar;
        },
        // 头像图片加载出错时替换为默认头像
        onAvatarError(event, item) {
          event.target.src = this.defaultAvatar; // 将错误的图片替换为默认头像
        },
    }

路由跳转传参 拼接数据

@click="$router.push(`/familyRanking?stuId=${$route.query.stuId}&deptId=${stuInfo.deptId}`)"