因为网络、图片资源不可用等问题，可能造成图片加载失败。这种情况下，显示效果就不是很美观。如下图：
为了优化用户体验，我们可以在图片加载失败后加载一个默认图片。
Vue 文件<template>标签中的图片标签：
<img :src="doctor.avatar" class="header-image" @error.once="setDefaultImage" />
其中，doctor.avatar是一个失效的地址，不是一个简单的空值，比如：https://nip.jk.net/admin/sys-file/show/buck/d9bc151c9b434ef1bf8ffcf0b0a5eace.jpg。
Vue3代码：
<script setup>
// 其它代码
// 引入默认图片
import defaultHeaderImage from '@/assets/img/default-header-image.png'
// 设置默认头像
const setDefaultImage = (e) => {
e.target.src = defaultHeaderImage
}
// 其它代码
</script>
效果图：
