CODEWITHSUNDEEP
next.jsfrontendnext.js14nextjs-15
No Date
No Date

Reputation: 29

Image doesn't show when I use 'fill' in nextJS

When I use fill option on next js image, it doesn't appear. But if I use width and height, image is displayed. What i need to do? (next js v15)

<div className=" relative mb-2 w-full flex justify-center items-center">
    <Image src={`http://localhost:1337${image}`} alt="product-image" fill/> 
</div>

Upvotes: -1

Views: 23

Answers (2)

imprs
imprs

Reputation: 54

<div className="relative mb-2 w-full flex justify-center items-center" style={{ height: '300px' }}>
    <Image src={`http://localhost:1337${image}`} alt="product-image" fill className="object-cover" />
</div>

Upvotes: 0

Yaniek
Yaniek

Reputation: 82

There problem with fill argument in your code occurs, because it requires a boolean like this: fill={true} or fill={false}. Your full, correct code should look like this:

<div className=" relative mb-2 w-full flex justify-center items-center">
    <Image src={`http://localhost:1337${image}`} alt="product-image" fill={true}/> 
</div>

Explanation of the code: Changing the fill parameter to it's correct form by passing a boolean (true or false) makes the code work properly.

Upvotes: 0

Related Questions