---
title: 头像组件
order: 1

---


单个头像用法


```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwAvatar,YwTitle } from '@ywfe/yw-design';
class App extends Component {
  render() {
    const src = 'https://wework.qpic.cn/bizmail/ka62hY6qBiciaCmU6XORKRmkPiazbfOaNOC8ReCxPHRIibTH5wOOuUl2Ug/0'
    const userName = '折柔'
    return (
        <>
            <YwTitle size='m' text='头像展示' />
            <YwAvatar src={src}/>
            <YwTitle size='m' text='名字显示' />
            <YwAvatar showName userName={userName} src={src}/>
            <YwTitle size='m' text='离职显示'/>
            <YwAvatar leaveJob src={src}/>
            <YwTitle size='m' text='空头像' />
            <YwAvatar  userName='折柔' src='' />
            <YwTitle size='m' text='图标展示'/>
            <YwAvatar src={src} extraIcon='REJECT'/>
            <YwAvatar src={src} extraIcon='WAITING'/>
            <YwAvatar src={src} extraIcon='SUCCESS'/>
            <YwTitle size='m' text='小号头像'/>
            <YwAvatar src={src}  size="small"/>
            <YwTitle size='m' text='组织架构'/>
            <YwAvatar type='org' extraIcon='WAITING'/>
        </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```