---
title: WKAvatar 头像
group:
  title: 展示组件
  path: /show/
---

## 何时使用

WKAvatar 头像组件，用于展示用户信息中的头像。

- 在 组件库 中，我们提供了两种类型的头像。

  - 圆形头像。
  - 方形头像。

- 另外提供了三种图片裁剪、缩放的模式。
  - cover：等同于 aspectFill -- 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来；也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
  - contain：等同于 aspectFit -- 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来；也就是说，可以完整地将图片显示出来。
  - scale：等同于 scaleToFill -- 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKAvatar } from '@wakeapp/components';
import avatar from './wk-star.png'; // 默认头像

const style = {
  margin: '40rpx 20rpx 0rpx 20rpx',
};

export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKAvatar src={avatar} style={style}></WKAvatar>
      <WKAvatar src={avatar} round={false} style={style}></WKAvatar>
    </PageWrapper>
  );
};
```

## 自定义尺寸

```tsx
/**
 * title: 自定义尺寸
 * desc: 自定义尺寸的头像
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKAvatar } from '@wakeapp/components';
import avatar from './wk-star.png'; // 默认头像

const style = {
  margin: '40rpx 20rpx 0rpx 20rpx',
};

export default () => {
  return (
    <PageWrapper title="自定义尺寸">
      <WKAvatar src={avatar} size={160} style={style}></WKAvatar>
      <WKAvatar src={avatar} round={false} size="160rpx" style={style}></WKAvatar>
    </PageWrapper>
  );
};
```

## 裁剪模式

```tsx
/**
 * title: 裁剪模式
 * desc: 三种裁剪模式
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKAvatar, View } from '@wakeapp/components';
import avatar from './wk-star.png'; // 默认头像

const style = {
  margin: '40rpx 20rpx 0rpx 20rpx',
};

export default () => {
  return (
    <PageWrapper title="裁剪模式">
      <View>
        <WKAvatar src={avatar} size="160rpx" mode="cover" style={style}></WKAvatar>
        <WKAvatar src={avatar} size="160rpx" mode="contain" style={style}></WKAvatar>
        <WKAvatar src={avatar} size="160rpx" mode="scale" style={style}></WKAvatar>
      </View>
      <View style={{ marginTop: '50px' }}>
        <WKAvatar src={avatar} size="160rpx" round={false} mode="cover" style={style}></WKAvatar>
        <WKAvatar src={avatar} size="160rpx" round={false} mode="contain" style={style}></WKAvatar>
        <WKAvatar src={avatar} size="160rpx" round={false} mode="scale" style={style}></WKAvatar>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKAvatar/index.d.ts'></API>
