Fill property for Next Image doesn't seem to work.

[Elindo586]

Link to the code that reproduces this issue

https://github.com/Elindo586/nextprojectb/blob/main/pages/services/fluid-analysis.js

To Reproduce

So, I can't get this to work. Might not be an issue, but I have to report it as an issue because I didn't find a way around it.

Sample code link here:
https://github.com/Elindo586/nextprojectb/blob/main/pages/services/fluid-analysis.js
Line 105
It can be reproduce by turning on the commented lines, and commenting the width and height.

Directions followed from this link:
https://nextjs.org/docs/pages/api-reference/components/image

<div className="col-md-9">
         <div className=" oil-analysis-span">
           <Image
             // fill={true}
             id="oil-analysis2"
             src="/images/oil-analysis2.png"
             alt="oil-analysis"
             // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
             width={700}
             height={400}
           />
         </div>

Related CSS is this:
Error can be produce by turning on the commenting line of position: absolute;

.oil-analysis-span {
  padding-left: 2em;
  position: relative;
}

#oil-analysis2 {
  height: auto;
  width: 50%;
  /* position: absolute; */
  object-fit: contain;
  object-position: center;
  margin-right: 1em;
}

Current vs. Expected behavior

The fill property for the Image tag just doesn't show the image at all.

If I give the image container dimensions, then it shows the image, but it isn't responsive to the down-size of the screen.

I am trying to get rid of image size errors from the lighthouse, and apparently using the fill property would automatically re-size the image, and it would be an alternative for scrset.

I would rather use next/image if it can resize the image, instead of manually resizing images and use the plain srcset property.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 16263
  Available CPU cores: 8
Binaries:
  Node: 20.12.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

[tigerabrodi]

@Elindo586 If you do fill I don't think you should specify the width and height since it'll fill?

Also, you may wanna specify width and height for the .oil-analysis-span element so the Image component knows how much to fill.

[tigerabrodi]

.oil-analysis-span {
  padding-left: 2em;
  position: relative;
  height: 400px; /* Ensure the parent container has a defined height */
}

#oil-analysis2 {
  object-fit: contain;
  object-position: center;
  margin-right: 1em;
}

and then the updated JSX may look:

<div className="col-md-9">
  <div className="oil-analysis-span">
    <Image
      fill={true}
      id="oil-analysis2"
      src="/images/oil-analysis2.png"
      alt="oil-analysis"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    />
  </div>
</div>

[sagish]

+1

When using layout="fill" with the next/legacy/image tag

<Image src="/images/birds.svg" alt="birds" layout="fill" />

the build fails on this error

ReferenceError: Cannot access 'd' before initialization

Next >=14.1.1
does not reproduce on 14.0.1

[gustaveWPM]

@Elindo586 If you do fill I don't think you should specify the width and height since it'll fill?

Also, you may wanna specify width and height for the .oil-analysis-span element so the Image component knows how much to fill.

Yes.
width and height properties are optional, depending on two scenarios:

• fill property is true
• the image is imported via a static import

[Elindo586]

height: 400px; /* Ensure the parent container has a defined height */

^^^ Well, that made the trick.

I previously gave the parent div height and width, and the image wouldn't shrink to be responsive, but giving the parent div just the value of height did the job.

I didn't see it in the literature, or missed it, and of course I just plain didn't know I must give it the parent div a size value.

Thank you much!

[Elindo586]

WAIT!!!

So, if you give the parent div a size for the height, it sure looks like the image is being responsive, but the div itself doesn't change height for smaller screens, so you end up with big spaces being used by the div even when the image gets smaller.

Usually, the the div and the image get smaller as you have smaller screens.

For this to work I have to do media queries to adjust the height of the parent div, which is not something I would have done before if I just specify the size of the image, but still better than providing a bunch of images to fix the wrong image size error from Google lighthouse.

Unfortunately, the technology to have a true responsive image doesn't seem to be there with the fill property..... and so far the fill property seems the only way to not get the image size error from the lighthouse.