Hydration mismatches on latest v1.7.1

ptdev commented 1 month ago

Hi there,

Just updated to the latest v1.7.1 and we're now getting a bunch of hydration mismatches when loading the webpage from the server.

The error:

[Vue warn]: Hydration attribute mismatch on <img onerror="this.setAttribute('data-error', 1)" class="rounded" src="/_ipx/q_50&blur_3&s_30x20/images/mountains_1.jpg" data-v-inspector="node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:2:3"> 
  - rendered on server: (not rendered)
  - expected on client: width="300"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <NuxtImg src="/images/mountains_1.jpg" placeholder= (2) [30, 20] width="300"  ... > 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

Reproduction link:

https://stackblitz.com/edit/github-petuym?file=package.json

(Just open the console and click stackblitz's refresh button to see the hydration issues)

Thanks, cheers!

pixelpaulaus commented 4 weeks ago

getting the same issue with all my images

DamianGlowala commented 4 weeks ago

Once v1.7.2 release is out, it should resolve this issue. In the meanwhile, you can stay on v1.7.0.

nuxt / image

Hydration mismatches on latest v1.7.1 #1443