Image class and style delay issue

[levipadre]

Has anyone been having issues with images?
Whenever I load a nextjs Image, and I have an object-fit on the image for example, I always notice a flick when it loads.
I tried defining a class in the main style, like .img-cover{object-fit: cover} or adding style to the image, like style={{objectFit: 'cover'}}, but on page load I always see first the image without it, so it squeezed.
I made a video with no throttling:
https://app.screencast.com/q5qf2V05QGWjD

I'm loading the component (which contains the image) from page.tsx:

import SliderLoading from '@/components/content-blocks/slider/slider-loading';
const Slider = dynamic(() => import('@/components/content-blocks/slider/slider'), {
    loading: () => <SliderLoading />,
    ssr: false
});

and the image itself:

               <Image
                    alt={image.name }
                    src={image.url}
                    className='img-fluid img-cover'
                    quality={70}
                    width={345}
                    height={345}
                    sizes='(min-width: 1600px) 345px, (min-width: 1400px) 300px, (min-width: 1200px) 255px, (min-width: 1000px) 210px, (min-width: 580px) 510px, 92.31vw'
                    loading='lazy'
                    placeholder='blur'
                    style={{objectFit: 'cover'}}
                    blurDataURL={blurDataUrl}
                />

Any ideas or suggestions?

Additional information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.5.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Example

No response

[tollanes]

I think they're not applying styling to the blur image. Which makes any image that is dynamically sized by CSS basically behave like your example. I really dont understand why this is the case. We are seeing the same issue on our blog hero images which do the weird pop in..

Almost tempted to just write my own raw image component for this since the feature seems incomplete. Is this intentional to save performance or something?

[joepetrillo]

Running into this issue as well. You can see it happening here in my app quite noticeably.

Stretched

Properly fit

Video of it happening

Screen_Recording_2024-07-13_at_1.23.05_PM.mov

[rikas]

I also struggle with this issue, remote images with object-fit: cover will stretch on page refresh... I can't find a fix for this!