Image

Media

Responsive image with loading state and fallback.

Preview

Usage

example.jsx

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

export default function Example() {
  return <Image />;
}

Source Code

Copy this file into components/ui/image.jsx in your project.

image.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Image = forwardRef(({ className, alt = "", fallback, ...props }, ref) => (
  <img ref={ref} alt={alt} loading="lazy" className={cn("rounded-md", className)}
    onError={(e) => { if (fallback) e.currentTarget.src = fallback; }}
    {...props}
  />
));
Image.displayName = "Image";

export { Image };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge