@uiw/react-avatar

Avatar 头像
===


用来代表用户或事物，支持图片、图标或字符展示。

``jsx
import { Avatar } from 'uiw';
// or
import Avatar from '@uiw/react-avatar';
`

基本用法

头像有四种尺寸，两种形状可选。

`jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

export default function Demo() {
return (


`jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

export default function Demo() {
return (


在组件上使用onError事件，处理显示错误的图片。

`jsx mdx:preview
import React from 'react';
import { Avatar, Icon } from 'uiw';

const App = () => {
const [src, setSrc] = React.useState('https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4')
return (


export default App;
`

带徽标的头像

`jsx mdx:preview
import React from 'react';
import { Avatar, Badge } from 'uiw';

export default function Demo() {
return (


| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| icon | 设置头像的图标类型，参考 Icon 组件 | String、ReactNode | - |
| shape | 指定头像的形状 square 正方形或者 circle 圆 | Enum{'circle', 'square' } | - |
| size | 设置头像的大小 | Enum{ 'large', 'small','mini', 'default' } | default` |
| src | 图片类头像的资源地址 | String | - |
| alt | 规定图像的替代文本 | String | - |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |