CODEWITHSUNDEEP
next.js
Big boy
Big boy

Reputation: 1761

How can I use next.js 13 image without providing width and height?

Next.js 13 is out. One of the refactored components is next/image.

I want to use it, but I want to set the image size using tailwind.

Here's my code:

import Image from 'next/image'

const Index = () => {
   return (
       <div>
           <Image
               src="https://picsum.photos/800/600"
               layout="fill"
               className="w-48 aspect-square md:w-72 xl:w-48"
           />
       </div>
   )
}

And I get this error:

Error: Image with src "https://picsum.photos/800/600" is missing required "width" property.

However, in docs it's said that it's possible to use fill without specifying the width and height.

What do I miss here?

Upvotes: 28

Views: 61379

Answers (6)

Amit Sarker
Amit Sarker

Reputation: 329

Add -

style={{ objectFit: 'cover', }} size={size}

Upvotes: 0

Vad.Gut
Vad.Gut

Reputation: 531

I would suggest a responsive approach that works nicely

The idea is to use the padding-top or padding-bottom property, which when given a percentage value, is calculated based on the width of the containing block. By using this fact, we can indirectly set an element's height based on its parent's width.

Among the advantages here are the fact we are using css only approach and not anything js that might cause a delay

      <div
    className="thumbnail"
    style={{
      position: "relative",
      width: "100%",
    }}
  >
    <div
      style={{
        paddingTop: "100%",
        height: 0,
        overflow: "hidden",
      }}
    >
      <Image
        itemProp="image"
        className={
          "game-cover-image lazy loaded object-cover border-radius"
        }
        fill
        src={'h}
        style={'https://via.placeholder.com/150'}
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          objectFit: "contain",
          objectPosition: "left",
        }}
      />
    </div>
  </div>


<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      position: relative;
      width: 100%;
    }

    .child {
      padding-top: 100%;
      height: 0;
      overflow: hidden;
    }

    .child-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('https://via.placeholder.com/350');
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>

<div class="parent">
  <div class="child">
    <div class="child-content">
      <!-- Content can go here -->
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 0

gellezzz
gellezzz

Reputation: 1263

Next.js will automatically determine the width and height if you import the image.

Local Images

import logoPic from "@/app/logo.png";
...
...       
   
<Image src={logoPic} alt="logo"/>

Upvotes: 6

JTtime
JTtime

Reputation: 81

As per NextJS 13, 4 props are required(Mandatory), src, alt, width and height. Layout is removed as props

so either provide this props manually to image and remove layout props from your code

<Image
  src={logo.src}
  alt="logo"
  width={some number}
  height={some number} 
/>

or if you want layout fill, give height and width to parent component and write only fill like follows.

<Image
  src={logo.src}
  alt="logo"
  fill
  // sizes="100vw"
  style={{
    objectFit: 'cover',
  }}
/>

problem with first approach is that it asks for width and height in px and not relative values. So I will recommend second approach, i.e. give height and width to parents component and provide fill props(not layout="fill")

Upvotes: 4

juicy j
juicy j

Reputation: 179

@ArielMirra I would use the fill prop on next image, and style the parent div to the image to be responsive, e.g:

<div className="w-[500px] h-[500px] lg:w-[1000px] lg:h-[1000px] relative">
 <Image src="/my-image.png" alt="My Image" fill />
</div>

I also think the parent needs the position of relative.

Upvotes: -2

ivanatias
ivanatias

Reputation: 4033

Next.js v13 new image component receives a fill prop which is a boolean instead of the old layout prop. Example:

<Image
  src="https://picsum.photos/800/600"
  fill
  ...
/>

Also, you can now style the component's underlying image element using style or className.

Example using Tailwind CSS:

<Image
  src="some-image-url"
  width="0"
  height="0"
  sizes="100vw"
  className="w-full h-auto"
/>

Upvotes: 56

Related Questions