Image

Image wraps the native image element with object-fit, aspect-ratio, lazy loading, and fallback support.

Preview

import { Image } from "niom-parts";

<Image
  src="/products/serum.jpg"
  fallbackSrc="/images/fallback.jpg"
  alt="Hydrating face serum"
  aspectRatio="4/3"
  objectFit="cover"
/>

Common use cases

Choose cover for product photography, contain for logos, and provide a fallback for remote media.

Live Editor

function ImageUseCases() {
  return (
    <div className="grid w-full max-w-xl grid-cols-2 gap-4">
      <Image src={Stock} alt="Product arrangement" aspectRatio="1/1" objectFit="cover" className="rounded-md" />
      <Image src="/missing-image.jpg" fallbackSrc={Logo} alt="Niom Parts" aspectRatio="1/1" objectFit="contain" className="rounded-md bg-surface p-6" />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default
src	string	required
alt	string	required
fallbackSrc	string	-
loading	"lazy" | "eager"	"lazy"
objectFit	"cover" | "contain" | "fill" | "none" | "scale-down"	"cover"
width	number	-
height	number	-
aspectRatio	string	-
className	string	-