本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
通过src指定头像的路径即可简单使用，如果传递了text参数，text将会优先起作用
注意： 请保证传递给src的是绝对地址，而不是相对地址，为什么呢？因为传入avatar组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。
<template> <view> <u-avatar :src="src"></u-avatar> <u-avatar :text="text"></u-avatar> </view> </template> <script> export default { data() { return { src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', text: '无头像' } } } </script>
copy
#头像形状
shape参数指定头像的形状，取值circle为圆形，取值square为圆角方形
<template> <u-avatar :src="src" shape="square"></u-avatar> </template> <script> export default { data() { return { src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' } } } </script>
copy
#图标头像
icon参数指定头像的图标，图标可参考icon组件
<view class="u-demo-block__content"> <view class="u-avatar-item"> <u-avatar icon="red-packet-fill" fontSize="22" ></u-avatar> </view> <view class="u-avatar-item"> <u-avatar icon="star-fill" fontSize="22" ></u-avatar> </view> </view> <style lang="scss"> .u-demo-block__content { @include flex; align-items: center; } .u-avatar-item { margin-right: 30px; } </style>
copy
#文字头像（自动背景色）
randomBgColor参数开启头像的自动背景色
<template> <u-avatar text="北" fontSize="18" randomBgColor ></u-avatar> </template>
copy
#默认头像
如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像
#头像组
使用u-avatar-group实现头像组
<template> <u-avatar-group :urls="urls" size="35" gap="0.4" ></u-avatar-group> </template> <script> export default { data() { return { urls: [ 'https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg', 'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg', 'https://cdn.uviewui.com/uview/album/5.jpg' ] } } </script>
