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