Next.js Discord

Discord Forum

Next Image Height Issue

Unanswered
kazii posted this in #help-forum
Open in Discord
Hi folks,
Why is that additional height being added in the first render?
Also, if height={0} as by default it's a layout shift, nothing is shown by default.
How to handle such cases?

This is my [image](https://cf.dino.co.in/misc/banner/website-shop-banner-2.png)
 <div className='w-full shrink-0 grow basis-auto'>
    <Image
      src='https://cf.dino.co.in/misc/banner/website-shop-banner-2.png'
      alt='Picture of the author'
      sizes='100vw'
      style={{
        width: '100%',
        height: 'auto',
      }}
      width={900}
      height={250}
    />
</div>

7 Replies

could also be that the component under your image is on the client and before u return any tsx u are doing some operations why the layout doesnt compute correctly
does the same also happen on build?
@gin u are only using tailwind?
Yes I'm using tailwind.
This carousel is being rendered via embla, so these are the client components.
Build doesn't have the layout shift.