0

Working on a simple grid with images and text. using Next 13.4.7 and tailwind, But when I try to import the image using the Next Image component and using the fill prop the image doesn't render.

return (
        <button className="relative group flex items-center rounded-md overflow-hidden gap-x-4 bg-neutral-100/10 hover:bg-neutral-100/20 pr-4 transition">
            <div className="relative min-h-[64px] min-w -[64px]">
                <Image className="object-cover" fill src={image} alt="Image" />
            </div>
            <p>
                {name}
            </p>
        </button>
    );

I have tried explicitly defining fill to true

fill = {true}

And that didn't work either.

But it seems to respond to swapping fill for height and width props

<Image className="object-cover" width={64} height={64} src={image} alt="Liked Playlist" />

Does anyone have an Idea on why that's happening? or what I'm doing wrong?

Priyen Mehta
  • 1,096
  • 1
  • 5
  • 19
Jelo Vlagst
  • 1
  • 1

2 Answers2

0

https://nextjs.org/docs/pages/api-reference/components/image

According to the official page src, width, height and alt must be included in the <Image/> tag... then you can use fill={true} with it otherwise it will not work.

Naveen Nizam
  • 193
  • 8
  • You are trying to say to use the `fill` property `height` and `width` must be included but as far as I understand it is the exact opposite. The documentation provided says: "A boolean that causes the image to fill the parent element instead of setting `width` and `height`." Can you please recheck and let me know if I am wrong? – AlefiyaAbbas Jul 03 '23 at 12:31
  • no.. width,height ,src,alt are compulsory and fill is not compulsory – Naveen Nizam Jul 03 '23 at 12:42
  • loading
    check it..it is work or not     – Naveen Nizam Jul 03 '23 at 12:43
  • The `fill` prop is used to substitute (for a lack of better work) the function of `width` and `height`. They can not be used together. – AlefiyaAbbas Jul 03 '23 at 12:54
0

The answer to your question is really really simple. See when you use fill prop it fills the parent div. It seems like you have given an extra space when defining the width of parent div. Try this and it should work:

return (
        <button className="relative group flex items-center rounded-md overflow-hidden gap-x-4 bg-neutral-100/10 hover:bg-neutral-100/20 pr-4 transition">
            <div className="relative min-h-[64px] min-w-[64px]">
                <Image className="object-cover" fill src={image} alt="Image" />
            </div>
            <p>
                {name}
            </p>
        </button>
    );
AlefiyaAbbas
  • 235
  • 11