Avatar 头像

源码位置：components/fui-avatar/fui-avatar.vue

展示头像图片或文字，支持加载失败时的替代图片。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 文字头像 -->
<fui-avatar text="李"></fui-avatar>

属性

属性	说明	类型	源码默认值
src	头像图片地址	String	''
errorSrc	图片加载失败时使用的替代地址	String	''
mode	图片裁剪或缩放方式	String	'scaleToFill'
lazyLoad	图片懒加载。只针对page与scroll-view下的image有效	Boolean	true
webp	默认不解析 webP 格式，只支持网络资源 微信小程序2.9.0	Boolean	false
background	头像背景色	String	'#D1D1D1'
size	small（64）、middle（96）、large（128）	String	'middle'
width	图片宽度，设置大于0的数值生效，默认使用size	[Number, String]	0
height	默认等宽，设置图大于0的数值且设置了图片宽度生效	[Number, String]	0
shape	指定头像的形状，可选值为 circle、square	String	'circle'
radius	图片圆角值，默认使用shape，当设置大于等于0的数值，shape失效	[Number, String]	-1
text	没有src时可以使用文本代替	String	''
color	文字颜色	String	'#fff'
fontSize	默认使用size下字体大小	[Number, String]	0
fontWeight	文字字重	[Number, String]	600
marginRight	右外边距，单位 rpx	[Number, String]	0
marginBottom	下外边距，单位 rpx	[Number, String]	0
index	在列表中的索引值	Number	0
params	其他参数	[Number, String]	0

事件

事件	说明	回调参数
click	点击头像	{ index, params }
error	已设置 src 的图片加载失败	{ index, params }

插槽

插槽	说明
default	头像内的自定义内容

平台及版本说明

图片懒加载与 WebP 能力依赖目标平台的原生 image 支持。官网列出的 block 属性在当前本地源码中未声明。