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}`)"