Image

An image component with loading skeleton, error fallback, aspect ratio presets, and lazy loading.

Aspect Ratios

The component includes four preset aspect ratios. A loading skeleton is shown until the image resolves.

Object Fit Modes

Control how the image fills its container.

cover

contain

Error Fallback

When an image fails to load, a fallback is shown. Defaults to a broken image icon.

Default fallback

Custom fallback

Installation

npx visor add image

This copies two files into your project:

components/ui/image/image.tsx — the component
components/ui/image/image.module.css — the styles

Usage

import { Image } from '@/components/ui/image/image';

export default function Example() {
  return (
    <Image
      src="/photo.jpg"
      alt="A scenic landscape"
      aspectRatio="video"
      objectFit="cover"
    />
  );
}

API Reference

Prop	Type	Default	Description
`aspectRatio`	`'square' \| 'video' \| 'portrait' \| 'auto'`	`'auto'`	Preset aspect ratio for the image container.
`fallback`	`ReactNode`	—	Content shown when the image fails to load.
`objectFit`	`'cover' \| 'contain' \| 'fill' \| 'none'`	`'cover'`	How the image fits within its container.
`loading`	`'eager' \| 'lazy'`	`'lazy'`	Native browser loading strategy.

The component also accepts all standard <img> HTML attributes.

Accessibility

Always provide a meaningful alt text describing the image content.
For decorative images, pass alt="" to hide them from screen readers.
The loading skeleton is hidden from assistive technology (aria-hidden).
The fallback state is visible to sighted users; ensure any custom fallback content is also accessible if it conveys meaning.
Images use native loading="lazy" by default — override with loading="eager" for above-the-fold images to avoid layout shift.