Why gap appears when switch from img to next/image?

Issue

I have here my site: https://tikex-dev.com

This part I talk about:

Down at the bottom of the image a 'gap' appers.

All I did replaced standard html img with Next.js Image, like this:

<Image
        src="https://ticket-t01.s3.eu-central-1.amazonaws.com/b29418ef-156d-43d7-872e-5d180cd1feb0"
        alt=""
        width={338}
        height={226}
/>

Added width and height as it is required.

Solution

Try to add layout prop to your next/image

<Image
        src="https://ticket-t01.s3.eu-central-1.amazonaws.com/b29418ef-156d-43d7-872e-5d180cd1feb0"
        alt=""
        width={338}
        height={226}
        layout="responsive"
/>

Answered By - iamhuynq