Question 199656 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next Js Image 'fill' prop, image not displaying

Working on a simple grid with image and text. using Next 13.4.7 and tailwind, But when I try to import the image using 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" />

Anyone have an Idea on why that’s happening? or what I’m doing wrong?

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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>
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search