Next.js Discord

Discord Forum

Next Image fill vs img

Unanswered
Kirtland's Warbler posted this in #help-forum
Open in Discord
Avatar
Kirtland's WarblerOP
Could someone explain me how could I use Next Image if i'd like to do something like this?

<div className="relative h-[430px] w-[660px]">
<div className="mt-[30px] h-[400px] w-[635px] rounded-xl bg-gradient-to-t from-indigo-800 to-red-400 shadow" />
<div className="absolute top-0 ml-[25px] h-[400px] w-[635px]">
<img
src="/landing-hero.png"
alt="home-image"
className="h-full w-full rounded-xl shadow"
/>
</div>
</div>

33 Replies

Avatar
Risky
you would just replace img with Img imported from 'next/image'
and specify height and width manualy (the largest you would show i think) actually do this: https://nextjs.org/docs/app/api-reference/components/image#sizes
Avatar
Kirtland's WarblerOP
@Risky if i just replace it i got: Error: Image with src "/landing-hero.png" is missing required "width" property.

if i add fill (2nd) image
if i specify the width and height (3rd)

Thank you for the link, I'll dig it!
Image
Image
Image
Avatar
Risky
hmm intresting, yeah read that link and come back if more issues... also that ui looks nice
Avatar
Risky
did you end up getting it to work?
Avatar
Clown
Thats not how Image works. You need to either do a static export which will coerce the width and height automatically else you have to manually write the width and height. This width and height is NOT the width and height of the image but just there to find an aspect ratio and to be basically like a placeholder BEFORE the image loads. This makes it so that the content doesnt shift around AFTER the image loads.

If you want to change the actual size of the image, use the css width and height properties using style(or with classes if you are using tailwind)
Avatar
Risky
did you see my message undereath
also they prob arn't going to respod
Avatar
Clown
Yeah :(
Avatar
Kirtland's WarblerOP
Thank you guys for the inputs, I couldn't find the solution in https://nextjs.org/docs/app/api-reference/components/image#sizes after some quick experiments than I had to do other stuffs.
Now I'm giving it another try and get back to you.
Avatar
Kirtland's WarblerOP
I am still missing something probably.

Added a desparate wrapper div and cleaned up the classNames.

          <div className="relative mb-12 h-[430px] w-[660px]">
            <div className="absolute left-0 top-[30px] h-[400px] w-[635px] rounded-xl bg-gradient-to-t from-indigo-800 to-red-400 shadow" />
            <div className="absolute left-[25px] top-0 h-[400px] w-[635px] rounded-xl shadow">
              <Image
                // unoptimized={true}
                src="/landing-hero.png"
                alt="home-image"
                width={635}
                height={400}
                style={{
                  width: "635px",
                  height: "400px",
                }}
              />
            </div>
          </div>
Image
Avatar
Clown
what exactly do you want to do again?
you want it to fill that container?
Avatar
Kirtland's WarblerOP
Yes.
If I set unoptimized to true it will be rendered as expected like this.
Image
Image
Avatar
Clown
have you tried:
<Image
fill={true}
...
/>
Avatar
Kirtland's WarblerOP
And this is the image, its size is 635 / 400 originally.

Yes, it i will result in the same weird padding like stuff.
Image
Image
This was done via

          <div className="relative mb-12 h-[430px] w-[660px]">
            <div className="absolute left-0 top-[30px] h-[400px] w-[635px] rounded-xl bg-gradient-to-t from-indigo-800 to-red-400 shadow" />
            <div className="absolute left-[25px] top-0 h-[400px] w-[635px] rounded-xl shadow">
              <Image
                // unoptimized={true}
                src="/landing-hero.png"
                alt="home-image"
                // width={635}
                // height={400}
                // style={{
                //   width: "635px",
                //   height: "400px",
                // }}
                fill={true}
              />
            </div>
          </div>
Avatar
Clown
guess ill have to try doing this in a sandbox
Avatar
Kirtland's WarblerOP
I'm starting to create a repo and share it soon
Avatar
Clown
that will be better, yes
cause i tested this in a sandbox and it works without any extra padding
Avatar
Kirtland's WarblerOP
Confirming that this code is working as expected in a freshly started latest next js project, I guess there might be something odd added to the parent divs / globally..
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="relative mb-12 h-[430px] w-[660px]">
        <div className="absolute left-0 top-[30px] h-[400px] w-[635px] rounded-xl bg-gradient-to-t from-indigo-800 to-red-400 shadow" />
        <div className="absolute left-[25px] top-0 h-[400px] w-[635px] rounded-xl shadow">
          <Image
            // unoptimized={true}
            src="/landing-hero.png"
            alt="home-image"
            // width={635}
            // height={400}
            // style={{
            //   width: "635px",
            //   height: "400px",
            // }}
            fill={true}
          />
        </div>
      </div>
    </main>
Avatar
Clown
i would recommend you go to the dev tools and check what is applying the padding/margin itself
also try doing a "!p-0 !m-0" maybe in the className of the Image or the div above image?
Avatar
Kirtland's WarblerOP
tried to do both
- could not find in the browser tool, it seems like the image has the right size but will receive an invisible padding
- added "!p-0 !m-0" but it didnt do the trick

Thank you for the reponses!
Image
Avatar
Clown
putting this in a repo would be the best idea for now ig
Avatar
Kirtland's WarblerOP
Created a repo where copy pasted every config and it worked as expected.
Copied back to the original stuff and changed the image file name and it is working now.
The image have been resized by me previously, and I didn't change the file name. Now I changed it. Could it be that the old one was cached? I also tried to disable and refresh cache previously but that did might not do the job?
Avatar
Clown
I mean if it works, it works
try disabling and re-enabling cache
and restarting the server a couple times, maybe use npm run build && npm start
and check if the problem persists there. You could also try using a incognito tab
Avatar
Kirtland's WarblerOP
Solved this by just moving / renaming the image. Thank you for the help, it was great to receive this many logical suggestions!