Avatar 头像

AuAvatar 展示图片头像、姓名缩写或自定义内容。姓名缩写使用主题语义色，颜色随姓名保持稳定。

基础用法

陈晓LCAA?

<script setup>
import { AuAvatar } from 'aurora-plus';
const image = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#e8eef8"/><circle cx="32" cy="24" r="12" fill="#3478f6"/><path d="M10 64v-8a22 22 0 0 1 44 0v8" fill="#3478f6"/></svg>');
</script>
<template>
  <div class="avatar-example">
    <AuAvatar name="陈晓" size="small" />
    <AuAvatar name="Lin Chen" />
    <AuAvatar name="Aurora" shape="square" size="large" />
    <AuAvatar :src="image" name="图像头像" />
    <AuAvatar src="data:image/png;base64,AA==" name="林楠" />
    <AuAvatar :size="48">A</AuAvatar>
    <AuAvatar />
  </div>
</template>
<style scoped>
.avatar-example { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
</style>

图片加载失败时显示默认插槽或姓名缩写。中文姓名取末两字，英文姓名取首尾单词首字母；空姓名显示 ?。

Avatar API

Attributes

属性	说明	类型	默认值
src	图片地址	string	''
name	姓名，用于缩写和默认图片说明	string	''
alt	图片说明	string	''
size	small（24px）/ default（32px）/ large（40px），或正数像素值	string | number	default
shape	形状：circle / square	string	circle

Events

事件名	说明	参数
error	图片加载失败	(event)

Slots

插槽名	说明
default	无图片或加载失败时的替代内容