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

@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!

hmm intresting, yeah read that link and come back if more issues... also that ui looks nice

did you end up getting it to work?

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)

also they prob arn't going to respod

Yeah :(

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.

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>

what exactly do you want to do again?

you want it to fill that container?

Yes.
If I set unoptimized to true it will be rendered as expected like this.

have you tried:

<Image
fill={true}
...
/>

And this is the image, its size is 635 / 400 originally.

Yes, it i will result in the same weird padding like stuff.

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>

guess ill have to try doing this in a sandbox

I'm starting to create a repo and share it soon

that will be better, yes

cause i tested this in a sandbox and it works without any extra padding

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>

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?

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!

putting this in a repo would be the best idea for now ig

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?

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

Solved this by just moving / renaming the image. Thank you for the help, it was great to receive this many logical suggestions!