Img

An enhanced wrapper around the Next.js Image component that adds automatic fallback behavior. When the primary image source fails to load, it seamlessly switches to the provided fallback image.

Import

import { Img } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Img
  src="/photos/beach.jpg"
  alt="Beach sunset"
  width={400}
  height={300}
/>

With fallback

<Img
  src="/photos/beach.jpg"
  fallbackSrc="/images/placeholder.jpg"
  alt="Beach sunset"
  width={400}
  height={300}
/>

Fill mode

<div className="relative h-48 w-full">
  <Img
    src="/photos/beach.jpg"
    fallbackSrc="/images/placeholder.jpg"
    alt="Beach sunset"
    fill
    className="object-cover"
  />
</div>

Props

The Img component extends all props from the Next.js Image component (next/image) with the following additions:

Prop	Type	Default	Description
`src`*	string \| StaticImport	-	The image source URL or static import.
`alt`*	string	-	Alt text describing the image.
`fallbackSrc`	string	-	Fallback image URL displayed if the primary source fails to load.
`onError`	(error: SyntheticEvent) => void	-	Callback fired when the image fails to load. Called in addition to the fallback behavior.
`width`	number	-	Image width in pixels. Required unless using fill mode.
`height`	number	-	Image height in pixels. Required unless using fill mode.
`fill`	boolean	-	When true, the image fills its parent container. Parent must have position: relative.