Avatar 头像

用户头像组件，支持图片、图标或文字展示。

基础用法

通过 src 属性设置图片地址，size 设置尺寸。

<template>
  <ZcAvatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
  <ZcAvatar
    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    size="large"
  />
  <ZcAvatar
    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    size="small"
  />
</template>

形状与图标

通过 shape 设置圆形或方形，icon 显示图标占位。

<template>
  <ZcAvatar shape="circle" size="large" icon="el-icon-user" />
  <ZcAvatar shape="square" size="large" icon="el-icon-user" />
  <ZcAvatar shape="circle" size="medium" icon="el-icon-user" />
  <ZcAvatar shape="square" size="medium" icon="el-icon-user" />
</template>

自定义尺寸与图片填充

size 支持数字自定义像素尺寸，fit 控制图片填充方式。

<template>
  <ZcAvatar
    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    :size="60"
    shape="square"
    fit="cover"
  />
  <ZcAvatar
    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    :size="60"
    shape="square"
    fit="contain"
  />
</template>

备用内容

图片加载失败时显示备用插槽内容。

<template>
  <ZcAvatar src="invalid-url.jpg" size="large">
    <template #fallback>
      <span style="font-size: 20px; color: #909399;">U</span>
    </template>
  </ZcAvatar>
</template>

Avatar API

Props

参数	说明	类型	默认值
src	图片地址	string	—
size	头像尺寸	large | medium | small | number	medium
shape	头像形状	circle | square	circle
icon	图标类名（图片加载失败或未提供 src 时显示）	string	—
alt	图片 alt 文本	string	—
fit	图片填充方式	fill | contain | cover | none | scale-down	cover

Slots

插槽名	说明
default	自定义内容（当未提供 src、icon 且非加载失败时显示）
fallback	图片加载失败或未提供 src 时的备用内容