Avatar 头像

用户的头像展示

基本使用

使用 src 属性设置图片的路径

round 属性可以配置圆角头像

开启

使用本地图片

如需要使用本地图片，需要使用 new URL(url, import.meta.url) 手动导入图片资源使用：

开启

适应容器的方式

fit 属性可以配置头像不同适应容器的方式，详见原生 object-fit 属性

fill

contain

cover

none

scale-down

开启

不同大小

size 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 px

开启

图标头像

icon 属性可以配置带有 icon 的图标头像

background 属性可以配置背景色，font-color 属性可以自定义图标颜色

font-size可以配置图标大小，后面必须要加入单位

开启

懒加载

lazy 属性可以设置图片懒加载，详情可参考 DevTools 的 Network

开启

加载失败

默认加载失败会显示 加载失败，当然你也可以使用 alt 属性自定义加载失败的提示文字

或者使用 error 插槽展示

开启

Attributes

参数	说明	类型	可选值	默认值
`src`	图片路径	string	——	——
`err-src`	加载失败时要显示的地址	string	——	——
`alt`	原生 alt 属性	string	——	加载失败
`round`	是否为圆角	boolean	——	false
`lazy`	是否懒加载头像	boolean	——	false
`fit`	如何适应容器，原生 object-fit 属性	FightingFit	`fill` `contain` `cover` `none` `scale-down`	——
`size`	图片大小	FightingSize / number	`large` `middle` `small` `mini`	middle
`background`	背景色	string	——	——
`icon`	图标头像	FightingIcon	——	——
`font-size`	字体大小	string	——	——
`font-color`	字体的颜色	string	——	——
`text`	文字头像	string	——	——
`root-margin`	触发懒加载的距离	string / number	——	100px
`on-load`	图片加载成功触发的回调	HandleEvent	——	——
`on-error`	图片加载失败触发的回调	HandleEvent	——	——

Slots

插槽名称	说明说明
`error`	自定义加载失败提示
`icon`	自定义 icon 头像

Interface

组件导出以下类型定义：

import type { AvatarInstance, AvatarProps } from 'fighting-design'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式

名称	描述
`--avatar-size`	尺寸

Avatar 头像 ​

基本使用 ​

使用本地图片 ​

适应容器的方式 ​

不同大小 ​

图标头像 ​

懒加载 ​

加载失败 ​

Attributes ​

Slots ​

Interface ​

样式变量 ​

Contributors ​