TUI

Avatar 头像
提供图片的渲染多种效果,支持 SSR 友好懒加载与错误态占位。
基础用法
用于头像场景,支持占位符、形状控制与错误态占位。
加载失败
示例代码
vue
不同大小
使用 size 控制尺寸:支持 minismallmediumlargex-large;也支持数值 size(如 80)直接指定像素。
示例代码
vue
图片 Fit 效果
支持原生 covercontainfill 图片填充方式。
示例代码
vue
拓展用法
自定义默认背景色与圆角。懒加载/占位、预览/删除请使用 TsImage组件。
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
src
头像图片地址
string
-
-
size
头像尺寸
'mini' | 'small' | 'medium' | 'large' | 'x-large' | number
mini / small / medium / large / x-large / number
medium
-
shape
形状
'circle' | 'square'
circle / square
circle
-
borderRadius
圆角(数值或字符串)
string | number
-
0
-
isUpload
是否为上传状态, 用于控制样式
boolean
-
false
0.3.2 开始支持
fit
图片填充方式
'cover' | 'contain' | 'fill'
cover / contain / fill
cover
-
fallback
无 src 时显示的占位字符
string
-
-
事件 Events
事件名
说明
回调参数
版本说明
preview
预览图片
null
delete
删除图片
null
load
图片加载结果
true / false
error
图片加载失败
native error (可选)
基础用法
不同大小
图片 Fit 效果
拓展用法
属性 Props
事件 Events