一、需求

1、css实现圆形头像

2、破图是显示默认图片

二、实现

<img :src="photoSrc" 
class="circle-avatar" 
:width="size" 
:height="size" 
 @error="handleImageError" //破图时使用的方法
>

<style>
.circle-avatar {
  border-radius: 50%;     /* 使图片变成圆形 */
  object-fit: cover;      /* 保持图片的纵横比，裁剪多余部分 */
}
</style>

const handleImageError = () => {
  //破图时，将img的src赋值为默认头像即可 	
  if (sexName == '男') {
    photoSrc.value = imgHost + '/images/source/common/avatar-man.svg';
  }
  else if (sexName == '女') {
    photoSrc.value = imgHost + '/images/source/common/avatar-woman.svg';
  }
  else
  {
    photoSrc.value = defaultPhoto;
  }
};

三、其他

最开始不是使用的img，使用的tdesign的<TAvatar>组件，按照步骤二中的方式处理破图，最后发现破图时会先闪现一下下方的图片，再加载为默认头像，最后才改为img这种方式解决了。