Avatar

A flexible avatar component that supports both static and dynamic images, with automatic optimization for local assets and seamless rendering for API-loaded content. Includes multiple size variants and two rendering modes for maximum compatibility.

pnpm dlx hybrid-astro-ui@latest add avatar

npx hybrid-astro-ui@latest add avatar

yarn dlx hybrid-astro-ui@latest add avatar

bunx hybrid-astro-ui@latest add avatar

The Avatar component supports two rendering modes, depending on the type of image you want to display:

1. renderMode=“static” — Static images

Use this mode when working with images that live inside your project, typically in the assets/ directory. In this case, the component uses Astro’s <Image /> from astro:assets, which provides automatic optimization (responsive images, webp/avif output, lazy loading, etc.).

2. renderMode=“dynamic” — Dynamic images

This mode is intended for images loaded at runtime, such as avatars fetched from APIs, CMS systems, or user-uploaded content. Because Astro cannot optimize images that are not known at build time, the component falls back to the standard HTML <img/> element.

Case #1: Static content

---
import { Avatar } from "@/src/components/hybrid-astro-ui/avatar"
---
<div class="grid grid-cols-1 md:grid-cols-4  gap-3 border p-3 place-items-center rounded-xl">
  <Avatar src={avatar_1} renderMode="static" size="small" alt="avatar-image" decoding="async" loading="eager" />
  <Avatar src={avatar_1} renderMode="static" size="medium" alt="avatar-image"  decoding="async" loading="eager" />
  <Avatar src={avatar_4} renderMode="static" size="large" alt="avatar-image"  decoding="async" loading="eager" />
  <Avatar src={avatar_4} renderMode="static" size="extralarge" alt="avatar-image"  decoding="async" loading="eager" />
</div>

Dynamic content (API example)

---
import { Avatar } from "@/src/components/hybrid-astro-ui/avatar"

export const prerender = false;
const username = "JorgeRosbel";
const res = await fetch(`https://api.github.com/users/${username}`);
const data = await res.json();

---
<div class="grid grid-cols-1 md:grid-cols-4  gap-3 border p-3 place-items-center rounded-xl">
  <Avatar src={data.avatar_url} renderMode="dynamic" size="small" alt="avatar-image" decoding="async" loading="eager" />
  <Avatar src={data.avatar_url} renderMode="dynamic" size="medium" alt="avatar-image" decoding="async" loading="eager" />
  <Avatar src={data.avatar_url} renderMode="dynamic" size="large" alt="avatar-image" decoding="async" loading="eager" />
  <Avatar src={data.avatar_url} renderMode="dynamic" size="extralarge" alt="avatar-image" decoding="async" loading="eager" />
</div>