Avatar

圆形头像容器与图片,基于 reka-ui 封装。

基本用法

默认

<script setup lang="ts">
import { AvatarImage, Avatar } from '@tripo3d/design';
</script>

<template>
  <Avatar class="size-10 inline-block rounded-full overflow-hidden">
    <AvatarImage
      class="size-full object-cover"
      src="https://example.com/avatar.png"
      alt="用户头像"
    />
  </Avatar>
</template>

不同尺寸

size 变化

<Avatar class="size-6 rounded-full overflow-hidden">
  <AvatarImage class="size-full object-cover" :src="url" alt="头像" />
</Avatar>
<Avatar class="size-10 rounded-full overflow-hidden">
  <AvatarImage class="size-full object-cover" :src="url" alt="头像" />
</Avatar>
<Avatar class="size-14 rounded-full overflow-hidden">
  <AvatarImage class="size-full object-cover" :src="url" alt="头像" />
</Avatar>

API

Avatar Props

名称	类型	默认值	说明
class	string	—	容器 class

其余 props 透传至 reka-ui Avatar,详见 reka-ui 文档。

AvatarImage Props

名称	类型	默认值	说明
src	string	—	图片地址
alt	string	—	替代文本
class	string	—	图片 class

其余 props 透传至 reka-ui AvatarImage,详见 reka-ui 文档。

可访问性

• 始终为 <AvatarImage> 提供 alt 文本,屏幕阅读器会朗读该内容
• 图片加载失败或仍在加载时,reka-ui 会通过内部状态处理回退显示
• 装饰性头像可使用空 alt="",避免读屏冗余