Image

Thin wrapper around Next.js Image. Always provide width + height or use fill with a positioned parent.

Usage

import { Image } from "@/ui";

<Image src="/photo.jpg" alt="A photo" width={600} height={400} />

<div className="relative h-64 w-full">
  <Image src="/hero.jpg" alt="Hero" fill sizes="100vw" />
</div>

Usage Notes

  • Thin wrapper around Next.js Image. Refer to their docs for the full API.
  • Always use Image from @/ui, never a raw <img>
  • Always pass sizes when using fill
  • Always provide meaningful alt text (empty string only for decorative images)

Basic Usage

import { Image } from "@/ui";

<Image src="/photo.jpg" alt="Description" width={400} height={300} />

Source

src/ui/Image.tsx
import NextImage, { type ImageProps } from "next/image";

export type { ImageProps };

export function Image(props: ImageProps) {
  return <NextImage {...props} />;
}