ars-avatar — Demo

About

Renders a profile image with automatic fallback to text initials when the image fails to load or is absent. Supports multiple sizes, shapes, and accessible alt text.

Sizes

<ars-avatar size="lg" fallback="LG"></ars-avatar>

Shapes

<ars-avatar shape="rounded" fallback="RO" size="lg"></ars-avatar>

With Image

<ars-avatar src="photo.jpg" alt="Fido" size="lg"></ars-avatar>

Fallback on Error

<ars-avatar src="broken.jpg" fallback="ER" size="lg"></ars-avatar>

Event Monitor

[ready] Listening for ars-avatar:error...

Theme Toggle

Usage

<ars-avatar
  src="https://example.com/photo.jpg"
  alt="User profile"
  fallback="JD"
  size="lg"
  shape="circle"
></ars-avatar>

<script>
  const avatar = document.querySelector('ars-avatar');
  avatar.addEventListener('ars-avatar:error', (e) => {
    console.log('Image failed:', e.detail.src);
  });
</script>