Avatar 头像

用于展示用户头像，支持图片、文字占位。

基础用法

import { Avatar } from '@airo-ui/react'

function Demo() {
  return <Avatar src="https://example.com/avatar.jpg" alt="用户头像" />
}

尺寸

import { Avatar } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Avatar size="sm" src="https://example.com/avatar.jpg" />
      <Avatar size="md" src="https://example.com/avatar.jpg" />
      <Avatar size="lg" src="https://example.com/avatar.jpg" />
    </>
  )
}

形状

import { Avatar } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Avatar shape="circle" src="https://example.com/avatar.jpg" />
      <Avatar shape="square" src="https://example.com/avatar.jpg" />
    </>
  )
}

文字占位

当未提供 src 或图片加载失败时，显示子元素作为占位内容。

import { Avatar } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Avatar>张</Avatar>
      <Avatar>A</Avatar>
    </>
  )
}

API

Props

名称	类型	默认值	说明
src	string	—	图片地址
alt	string	—	图片 alt 文本
size	'sm' | 'md' | 'lg'	'md'	尺寸
shape	'circle' | 'square'	'circle'	形状
children	ReactNode	—	图片失败时的文字占位