[BUG] - Image does not support Next.js Image fill prop

[johnmangan]

NextUI Version

2.1.13

Describe the bug

The NextUI Image does not support Next.js Image's fill prop when using as={NextImage}. Using the fill prop is mutually exclusive to using the width and height, as it fills the space of the parent. https://nextjs.org/docs/app/api-reference/components/image

The NextUI Image code includes a wrapper which sets maxWidth to the same value as the provided width prop, or fit-content if width was not provided. https://github.com/nextui-org/nextui/blob/a978687b0736d1e15943ef46628fc4fa0723ddc7/packages/components/image/src/use-image.ts#L114-L120 https://github.com/nextui-org/nextui/blob/a978687b0736d1e15943ef46628fc4fa0723ddc7/packages/components/image/src/use-image.ts#L161-L167

This creates a scenario where the Next.js image is inheriting the wrapper's width, but the wrapper has max-width: fit-content which forces the width to be 0.

I tried to use the classNames prop to pass the wrapper 100% width and height, which solves the height issue, but the max-width: fit-content still clamps the width to 0. And since the max-width is being set via an inline style, using classNames cannot override the max-width either.

Preferably, the NextUI Image could also take a fill prop instead of width and height, which would similarly use the parent's size.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

import { Image } from "@nextui-org/react";
import NextImage from "next/image";

// render the following in any page
<div style={{height: "300px", width: "300px"}}>
  <Image
    src="https://picsum.photos/200"
    alt="Alt text"
    as={NextImage}
    fill
  />
</div>

Expected behavior

I would expect to see a 300x300 px image rendered, but instead a 0x0 px image is rendered.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[johnmangan]

Since min-width takes precedence over max-width, I was able to override the max-width: fit-content with the prop classNames={{ wrapper: "min-w-full h-full"}}.

This feels terrible fragile, but I'll include it here as a temporary workaround for anyone else who comes across the same issue.

[romanticsoul]

+1