FaAvatar

Extends the native avatar with Base64 support and original, standard, small and thumbnail suffixes used by the Fast image service.

View code

<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 Complete API

Props (12)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
`icon`	Fast override	Icon component or name.	`String / Object / Function`	Fast`—`EL`—`
`src`	Fast override	Image URL or Base64 content.	`String`	Fast`""`EL`""`
`base64`	Fast addition	Interpret the value as Base64 image content.	`Boolean`	`false`
`original`	Fast addition	Use the original image URL.	`Boolean`	`false`
`normal`	Fast addition	Use the standard-image URL suffix.	`Boolean`	`false`
`small`	Fast addition	Use the small-image URL suffix.	`Boolean`	`false`
`thumb`	Fast addition	Use the thumbnail URL suffix.	`Boolean`	`false`
`size`	EL native	Component size.	`Number / String`	`—`
`shape`	EL native	Avatar shape.	`String`	`—`
`alt`	EL native	Alternative text when image loading fails.	`String`	`—`
`srcSet`	EL native	Native image srcset.	`String`	`—`
`fit`	EL native	How content fits its container.	`String`	`cover`

Events（1）

Name	Source	Description	Parameters / type
`error`	EL native	Resource loading or component processing fails.	`—`

Slots（1）

Name	Source	Description	Parameters / type
`default({ src })`	EL native	Default component content.	`({ src })`

Expose（1）

Name	Source	Description	Parameters / type
`src`	Fast addition	Final processed FaAvatar image URL.	`—`

FaAvatar ​

FaAvatar Complete API

FaAvatar