-
Notifications
You must be signed in to change notification settings - Fork 26.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fill property for Next Image doesn't seem to work. #65890
Comments
@Elindo586 If you do Also, you may wanna specify width and height for the |
.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> |
+1 When using <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 |
Yes.
|
^^^ 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! |
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. |
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
Related CSS is this:
Error can be produce by turning on the commenting line of
position: absolute;
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
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
The text was updated successfully, but these errors were encountered: