Avatar
Display user or thing with icons, images, or characters.
Basic Usage
Display avatar via icon, src, or default slot.
USERSizes
Set size via size prop. Preset values are small (28px), default (40px), large (56px), or a custom pixel number.
Shapes
Supports circle and square shapes.
Image Fit
Set image fit mode via fit prop, consistent with CSS object-fit.
Custom Color
Customize the avatar background color via background-color prop.
Error Handling
Handle image load error via error event. The default slot serves as fallback content.
Use in Nuxt
The Avatar component fully supports Nuxt 3/4 SSR rendering. The avatar size, shape, and image are correctly rendered on the server, ensuring complete user avatar information is presented on the first screen.
JSSR Notes:
- ✅ Avatar size (size), shape (shape), and image fit (fit) render correctly on first load
- ✅ Custom background color (background-color) and text content supported in SSR
- ✅ Image src / srcset are included in server-rendered HTML
- 💡 Image load error fallback handling is completed after client-side activation
Nuxt Auto Import
After installing the @yh-ui/nuxt module, the YhAvatar component is auto-registered, no manual import needed.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| shape | Avatar shape | 'circle' | 'square' | 'circle' |
| size | Avatar size, supports preset values or pixel number | number | 'large' | 'default' | 'small' | 'default' |
| src | Image URL | string | — |
| src-set | Image srcset for responsive loading | string | — |
| alt | Image alt text | string | — |
| fit | Image fit mode | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' |
| icon | Icon component, displayed when no image | string | Component | — |
| color | Background color (legacy API) | string | — |
| background-color | Background color | string | — |
| theme-overrides | Theme override variables | ComponentThemeVars | — |
Events
| Event Name | Description | Parameters |
|---|---|---|
| error | Triggered when image fails to load | (event: Event) => void |
Slots
| Slot Name | Description |
|---|---|
| default | Custom content (text or icon) |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-avatar-bg-color | Background color | var(--yh-color-primary-light-8, #d9ecff) |
--yh-avatar-text-color | Text color | var(--yh-color-primary, #409eff) |
--yh-avatar-radius | Square avatar border radius | var(--yh-border-radius-base, 4px) |