# El Avatar

> Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.

- **Type:** Skill
- **Install:** `agentstack add skill-jiaiyan-element-plus-skills-el-avatar`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiaiyan](https://agentstack.voostack.com/s/jiaiyan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-avatar
- **Website:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

## Install

```sh
agentstack add skill-jiaiyan-element-plus-skills-el-avatar
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Avatar Component

Avatar component displays user avatars or entity representations, supporting images, icons, or characters.

## When to Use

- User profile pictures
- Team member displays
- Entity representations
- Avatar groups for teams

## Basic Usage

```vue

  
  

const avatarUrl = 'https://example.com/avatar.jpg'

```

## Types

```vue

  
  
  user

import { UserFilled } from '@element-plus/icons-vue'

```

## Fallback

```vue

  
    
  

const errorHandler = () => true

```

## Fit Container

```vue

  
  
  

```

## Avatar Group

```vue

  
    
    
    
  

```

## API Reference

### Avatar Attributes

| Name | Description | Type | Default |
|------|-------------|------|---------|
| icon | Icon representation | `string \| Component` | — |
| size | Avatar size | `number \| 'large' \| 'default' \| 'small'` | — |
| shape | Avatar shape | `'circle' \| 'square'` | — |
| src | Image source | `string` | — |
| src-set | Native srcset attribute | `string` | — |
| alt | Native alt attribute | `string` | — |
| fit | How image fits container | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'cover'` |

### Avatar Events

| Name | Description | Type |
|------|-------------|------|
| error | Trigger when image load error | `(e: Event) => void` |

### Avatar Slots

| Name | Description |
|------|-------------|
| default | Customize avatar content |

### AvatarGroup Attributes

| Name | Description | Type | Default |
|------|-------------|------|---------|
| size | Control size of avatars in group | `number \| 'large' \| 'default' \| 'small'` | — |
| shape | Control shape of avatars in group | `'circle' \| 'square'` | — |
| collapse-avatars | Whether to collapse avatars | `boolean` | `false` |
| collapse-avatars-tooltip | Show collapsed avatars on hover | `boolean` | `false` |
| max-collapse-avatars | Max avatars shown before collapse | `number` | `1` |
| effect | Tooltip theme | `'dark' \| 'light'` | `'light'` |
| placement | Tooltip placement | Placement enum | `'top'` |

## Best Practices

1. Use `fit="cover"` for consistent avatar appearance
2. Provide fallback content for image load errors
3. Use AvatarGroup for team displays with collapse feature

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** [jiaiyan/element-plus-skills](https://github.com/jiaiyan/element-plus-skills)
- **License:** MIT
- **Homepage:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiaiyan-element-plus-skills-el-avatar
- Seller: https://agentstack.voostack.com/s/jiaiyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.