---
order: 2
title: 单图片头像
zh-CN: 单图片头像
en-US: Image Avatar
---

## zh-CN

单个图片头像，不带附加操作

## en-US

Avatar with only an image, without extra operations

````jsx
import Avatar from '../src/index.jsx';
import { Balloon } from '@alicloudfe/components';

const { Tooltip } = Balloon;
const { ImageAvatar } = Avatar;

class Demo extends React.Component {
  render() {
    return (
      <div>
        <h3>不同尺寸</h3>
        <div>
          <ImageAvatar img="https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200" size="xs" />
          <ImageAvatar img="https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200" size="small" />
          <ImageAvatar img="https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200" />
          <ImageAvatar img="https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200" size="large" />
          <ImageAvatar img="https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200" size="xl" />
        </div>
      </div>
    );
  }
}

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