FaAvatar 头像

除原生头像能力外，支持 Base64 和团队图片服务的原图、标准图、小图、缩略图后缀。

查看代码

<template>
	<div class="demo-row">
		<div class="demo-caption-item"><FaAvatar :src="avatar" original :size="64" /><span>原图</span></div>
		<div class="demo-caption-item"><FaAvatar :src="avatar" original shape="square" :size="64" /><span>方形</span></div>
		<div class="demo-caption-item"><FaAvatar :src="pixel" base64 :size="64">Base64</FaAvatar><span>Base64</span></div>
		<div class="demo-caption-item"><FaAvatar :size="64" /><span>默认图标</span></div>
	</div>
</template>

<script setup lang="ts">
const avatar = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect width="120" height="120" rx="24" fill="#409eff"/><text x="60" y="76" text-anchor="middle" font-size="34" fill="white">Fast</text></svg>'
)}`;
const pixel = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wl2nzoAAAAASUVORK5CYII=";
</script>

FaAvatar 完整 API

Props 属性 (12)

Fast 与 Element Plus 2.14.6 的属性已合并展示；Fast 修改项优先排列，未透传的原生属性保留用于兼容性核对。

属性	来源	说明	类型	默认值
`icon`	Fast 修改	图标组件或图标名称。	`String / Object / Function`	Fast`—`EL`—`
`src`	Fast 修改	图片地址或 Base64 图片内容。	`String`	Fast`""`EL`""`
`base64`	Fast 新增	将值作为 Base64 图片内容。	`Boolean`	`false`
`original`	Fast 新增	使用原始图片地址。	`Boolean`	`false`
`normal`	Fast 新增	使用标准图地址后缀。	`Boolean`	`false`
`small`	Fast 新增	使用小图地址后缀。	`Boolean`	`false`
`thumb`	Fast 新增	使用缩略图地址后缀。	`Boolean`	`false`
`size`	EL 原生	组件尺寸。	`Number / String`	`—`
`shape`	EL 原生	头像形状。	`String`	`—`
`alt`	EL 原生	图片加载失败时的替代文本。	`String`	`—`
`srcSet`	EL 原生	原生图片 srcset 属性。	`String`	`—`
`fit`	EL 原生	内容如何适应容器。	`String`	`cover`

Events 事件（1）

名称	来源	说明	参数 / 类型
`error`	EL 原生	资源加载或组件处理失败时触发。	`—`

Slots 插槽（1）

名称	来源	说明	参数 / 类型
`default({ src })`	EL 原生	组件默认内容插槽。	`({ src })`

Expose 暴露（1）

名称	来源	说明	参数 / 类型
`src`	Fast 新增	FaAvatar 处理后的最终图片地址。	`—`

FaAvatar 头像 ​

FaAvatar 完整 API

FaAvatar 头像