Image

PreviousNext

An optimized image component with built-in lazy loading and responsive image support using the picture element

Placeholder image
'use client';

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

export function ImageDemo() {
  return (
    <Image
      alt="Placeholder image"
      className="rounded-lg"
      src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&h=600&fit=crop"
    />
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/image.json

Usage

import Image from '@/docs/lib/ui/image';
 
export function Component() {
  return (
    <Image
      alt="A scenic mountain view"
      src="https://example.com/image.jpg"
      className="rounded-lg"
    />
  );
}

Responsive Images with Multiple Sources

import Image from '@/docs/lib/ui/image';
 
export function Component() {
  return (
    <Image
      alt="A scenic mountain view"
      src="https://example.com/image-large.jpg"
      sources={[
        {
          media: '(max-width: 640px)',
          srcSet: 'https://example.com/image-small.jpg',
        },
        {
          media: '(max-width: 1024px)',
          srcSet: 'https://example.com/image-medium.jpg',
        },
      ]}
      className="rounded-lg"
    />
  );
}

API Reference

Image

PropTypeDefaultDescription
srcstringRequiredThe image source URL
altstring""Alternative text for the image for accessibility. Defaults to empty string if not provided
lazyLoadbooleantrueEnables lazy loading and async decoding for the image. When true, sets loading="lazy" and decoding="async". When false, sets loading="eager" and decoding="auto"
sourcesSourceHTMLAttributes<HTMLSourceElement>[]undefinedArray of source elements for responsive images. When provided, wraps the image in a <picture> element with multiple <source> tags for art direction or responsive image delivery
classNamestringundefinedAdditional CSS classes to apply to the image element
...restComponentPropsWithoutRef<"img">-All standard HTML image attributes are supported (e.g., width, height, sizes, srcSet, title, etc.)

Notes

  • Lazy Loading: By default, images are lazy loaded (loading="lazy") and use async decoding (decoding="async"). This improves page load performance by deferring off-screen image loading.
  • Non-draggable: All images have draggable="false" set by default to prevent accidental drag operations.
  • Responsive Images: When the sources prop is provided, the component automatically renders a <picture> element with multiple <source> elements, allowing the browser to select the most appropriate image based on viewport size, screen resolution, or format support.
  • Accessibility: Always provide descriptive alt text for images. The component defaults to an empty string, but meaningful alternative text is essential for screen readers and when images fail to load.
  • Standard Image Attributes: The component extends all standard HTML image element properties, so you can use any valid <img> attribute like width, height, sizes, srcSet, etc.