Media component

Introduction

The Media component provides a flexible way to display images while ensuring proper loading states, fallbacks, and accessibility features. It handles lazy loading and includes built-in error handling.

When to use

Responsive images
Blog post media
Product images
Background media
Any content requiring image display
Hero sections
Gallery items

Usage

---
import { Media } from 'accessible-astro-components'
---

<Media
  src="/path/to/image.jpg"
  alt="Descriptive alt text"
/>

Props

Prop	Type	Default	Description
`src`	`string`	required	URL or path to the image
`alt`	`string`	`''`	Alternative text for the image (required for accessibility)
`class`	`string`	`''`	Additional CSS classes to apply

Accessibility features

Required alt text support for images
Loading states with appropriate ARIA attributes
High contrast fallback for loading states
Error states for failed image loads
Proper focus management

.media {
  --media-radius: 0.5rem;
  --media-shadow: none;
  --media-loading-bg: var(--sl-color-gray-5);
  --media-error-color: var(--sl-color-red-high);
}

.media {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}

.media__image {
  width: 100%;
  height: auto;
  display: block;
}

.media--loading {
  background: var(--media-loading-bg);
  min-height: 200px;
}

Interactive example

A random example image from Lorem Picsum