uniapp 头像组件

Uniapp 中可以使用 u-avatar 组件来实现头像的显示。

u-avatar 组件的使用方法如下：

1. 在 template 中添加 u-avatar 组件

<template>
  <view>
    <u-avatar size="large" src="../../static/avatar.png"></u-avatar>
  </view>
</template>

2. 设置 u-avatar 组件的属性

u-avatar 组件支持多个属性，常用的属性包括：

- size：头像尺寸，可选值为 small、default、large，默认为 default。
- src：头像图片地址。
- shape：头像形状，可选值为 circle、square，默认为 circle。
- icon：头像图标，可选值为 各种 icon 名称。

<template>
  <view>
    <u-avatar size="large" src="../../static/avatar.png" shape="square"></u-avatar>
  </view>
</template>

3. 在 style 中设置 u-avatar 组件的样式

u-avatar 组件的样式可以在 style 中设置，如下：

<template>
  <view>
    <u-avatar size="large" src="../../static/avatar.png" shape="square" class="avatar"></u-avatar>
  </view>
</template>

<style>
  .avatar {
    margin-top: 20px;
    margin-left: 20px;
  }
</style>

以上就是 Uniapp 头像组件 u-avatar 的使用方法。