Avatar 头像

介绍

一般用于展示用户头像。

使用指南

使用内置默认头像

<tms-avatar/>

指定头像链接

<tms-avatar src="https://static.img.tai.qq.com/mp/ops/banner/2021/46/tmsui2_1636463308.png"/>

自定义大小

<tms-avatar size="48px"/>

尝试获取用户头像

<tms-avatar current-user/>

自定义默认图

<tms-avatar default-avatar="/components/avatar/demos/images/1.png"/>

错误时加载默认图

<tms-avatar default-avatar="/components/avatar/demos/images/1.png" src="/unreachable.jpg"/>

API

属性	说明	类型	默认值	版本
size	图片大小，small/large/自定义尺寸	string	small
src	图片路径，不设置则使用默认图	string
img-style	自定义元素样式	string
default-avatar	自定义默认头像	string
current-user	是否使用微信用户头像	boolean	false
error-use-default	错误时是否显示默认头像	boolean	true

current-user: 微信官方已经计划收回open-data获取用户头像的能力，建议不使用该属性。

官方说明 (opens new window)

EVENTS

属性	说明	类型
bind:tap	点击头像事件	(event) => {}
bind:on-load-error	获取图片出错事件	(event) => {}

css变量

// 小尺寸头像宽度
@avatar-small-width: 68rpx;
// 小尺寸头像高度
@avatar-small-height: 68rpx;
// 大尺寸头像宽度
@avatar-large-width: 188rpx;
// 大尺寸头像高度
@avatar-large-height: 188rpx;
// 圆角大小
@avatar-border-radius: 50%;

FAQ