skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-avatar

Render and manage user avatars in Naive UI applications.

8|3|Updated Mar 13, 2026
Search Tags:#frontend#vue#lazy-loading#avatar#ui-component#group#naive-ui
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-avatar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-avatar
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-avatar
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-avatar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Avatar rendering and management for user profiles, teams, and content requiring recognizable identity across UI.

Core Features & Use Cases

  • Multiple Sizes: small, medium, large, or custom pixel size
  • Shape Options: square or round
  • Image & Fallback: load from src with optional fallback-src
  • Lazy Loading & Groups: lazy loading and avatar groups with max display
  • Color & Icon Content: support for text, icons, and color customization

Quick Start

Instantiate an avatar component with a URL and optional round shape to display a user image.

Frequently Asked Questions about n-avatar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render user avatars with fallback images in Vue?▼

To render user avatars in Vue, you can use a UI component that supports a primary src and an optional fallback-src to display placeholder images if the original fails to load.

Can I display an avatar group with a maximum limit in Naive UI?▼

Yes, you can display avatar groups in Naive UI with a maximum display limit. This feature handles overflow by showing a set number of avatars and indicating remaining members.

How does lazy loading work for avatar components?▼

Lazy loading for avatar components defers image loading until the element enters the viewport, optimizing page performance by avoiding unnecessary network requests for off-screen images.

How do I customize avatar shapes and sizes for a user profile?▼

You can customize avatar shapes and sizes by configuring round or square options and selecting small, medium, large, or custom pixel dimensions to fit your profile layout.

What can I display inside an avatar if the user image is missing?▼

If the user image is missing, you can display text initials, icons, or color-customized content within the avatar using built-in slots and styling properties.

Does this avatar component support object-fit for responsive images?▼

Yes, the avatar component supports object-fit properties, ensuring profile images maintain their aspect ratio and scale correctly within dynamic container sizes.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
jiaiyanjiaiyan
21

el-avatar

Render user avatars with images, icons, or initials in Element Plus.

Community
Intermediate
Yapie0Yapie0
55

trello

Automate Trello board, list, and card management via the REST API.

Community
Intermediate
jiaiyanjiaiyan
8

n-page-header

Render reusable page header UI with title, subtitle, and action slots for Naive UI pages.

Community
Intermediate