Image

Use Image

Image is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Image } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Image src="/flood-mark.png" alt="Flood logo" width={160} height={160} fit="contain" />
    </FloodRoot>
  );
}

Design notes

• alt is required; an empty string is appropriate for decorative imagery beside equivalent visible content.
• Native src/srcSet/sizes/loading/decoding/dimensions, handlers and HTMLImageElement ref are preserved. Supply width/height or AspectRatio to reserve geometry.
• fit cover/contain changes object-fit, not fetching, optimization or fallback behavior. Avatar composes Image with its own load/fallback lifecycle.
• Available in 0.2.4; use matching installed declarations.

API reference