CSS 圆形头像和破图时显示默认图片

一、需求

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这种方式解决了。

原文地址：https://blog.csdn.net/u010865136/article/details/145188149

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！