Avatar.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/avatar.tsx

功能描述

头像组件，用于显示用户头像或备用信息。支持图片加载失败时显示回退内容。

导出内容

• Avatar - 头像容器组件
• AvatarImage - 头像图片组件
• AvatarFallback - 头像回退组件（图片加载失败时显示）

Props 接口

Avatar

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof AvatarPrimitive.Root>	否	-	Radix UI Avatar 根组件属性

AvatarImage

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof AvatarPrimitive.Image>	否	-	图片属性

AvatarFallback

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof AvatarPrimitive.Fallback>	否	-	回退内容属性

依赖

• @radix-ui/react-avatar - Radix UI 头像原语
• @/lib/utils - 工具函数 (cn)

使用示例

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="https://example.com/avatar.jpg" alt="用户名" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

// 带自定义样式
<Avatar className="size-10">
  <AvatarImage src="https://example.com/avatar.jpg" />
  <AvatarFallback className="bg-primary text-primary-foreground">
    用户
  </AvatarFallback>
</Avatar>