> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/shi-tu/avatar-tou-xiang.md).

# Avatar 头像

## 概述

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

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iAvatar from 'iview-mpvue/dist/components/avatar/avatar'
    export default {
        components: {
            'i-avatar': iAvatar
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/avatar/style/css'
```

## 示例

```markup
<i-panel title="圆形"></i-panel>
    <i-row i-class="row-class">
        <i-col span="8">
            <i-avatar size="small">梁</i-avatar>
        </i-col>
        <i-col span="8">
            <i-avatar>梁</i-avatar>
        </i-col>
        <i-col span="8">
            <i-avatar size="large">梁</i-avatar>
        </i-col>
    </i-row>
<i-panel title="方形"></i-panel>

<i-row i-class="row-class">
    <i-col span="8">
        <i-avatar size="small" shape="square">A</i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar shape="square">A</i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar size="large" shape="square">A</i-avatar>
    </i-col>
</i-row>

<i-row i-class="row-class">
    <i-col span="8"></i-col>
    <i-col span="8"></i-col>
    <i-col span="8"></i-col>
</i-row>

<i-panel title="图片"></i-panel>

<i-row i-class="row-class">
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small"></i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default"></i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large"></i-avatar>
    </i-col>
</i-row>

<i-row i-class="row-class">
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" shape="square"></i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default" shape="square"></i-avatar>
    </i-col>
    <i-col span="8">
        <i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large" shape="square"></i-avatar>
    </i-col>
</i-row>
```

## API

Avatar properties

| 属性      | 说明                               | 类型     | 默认值     |
| ------- | -------------------------------- | ------ | ------- |
| i-class | 自定义 class 类名                     | String | -       |
| shape   | 指定头像的形状，可选值为 circle、square       | String | circle  |
| size    | 设置头像的大小，可选值为 large、small、default | String | default |
| src     | 图片类头像的资源地址                       | String | -       |