Avatar 头像

Basic · Display component

Avatars and fallback placeholders.

On-demand importwbbb-ui/components/avatar

Basic Usage

<script setup lang="ts">
import { WbbbAvatar } from 'wbbb-ui/components/avatar'
import 'wbbb-ui/styles/avatar'
</script>

<template>
  <WbbbAvatar />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

图片Load-failure fallbackInitialsDefault icon

API Reference

Props

Property	Description	Type	Default	Required
`alt`	Provides alternative text for an image resource.	`string`	`''`	No
`round`	Uses fully rounded corners or a pill shape.	`boolean`	`true`	No
`size`	Sets the component size.	`WbbbNumeric`	`80`	No
`src`	Sets the source URL or local path of the resource.	`string`	`''`	No

Events

error

Slots

default

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.

Avatar 头像 ​

Basic Usage ​

States and Interaction ​

API Reference ​