NuxtImage Hydration mismatch
Hi everyone 
am facing a Hydration mismatch issue with Nuxt image and I need some help
the project am working on is a Nuxt 3.17, NuxtImg 1.10 with ipx provider.
when i run the project in dev mode i get Hydration mismatch warning that the srcset is different between the server and the client.
message:
- rendered on server: srcset="/_ipx/f_webp&s_248x177/https://www.domain.com/files/image.jpg, /_ipx/f_webp&s_496x354/https://www.domain.com/files/image.jpg 2x"β¨
- expected on client: srcset="/_ipx/f_webp&s_248x177/https://www.domain.com/files/image.jpg 1x, /_ipx/f_webp&s_496x354/https://www.domain.com/files/image.jpg 2x"
as you can notice in the server the first image value doesn't have the "1x"!
in the nuxt.config I have set "densities: [1,2]"
and in the template I have set the Nuxt image like this:
<nuxt-img densities="x1 x2" format="webp" :src="image" :alt="imageAlt" width="120" height="75" loading="lazy"/>
any suggestions why this happening and how I could fix it ?
thanks in advance Pachanca
am facing a Hydration mismatch issue with Nuxt image and I need some help
the project am working on is a Nuxt 3.17, NuxtImg 1.10 with ipx provider.
when i run the project in dev mode i get Hydration mismatch warning that the srcset is different between the server and the client.
message:
- rendered on server: srcset="/_ipx/f_webp&s_248x177/https://www.domain.com/files/image.jpg, /_ipx/f_webp&s_496x354/https://www.domain.com/files/image.jpg 2x"β¨
- expected on client: srcset="/_ipx/f_webp&s_248x177/https://www.domain.com/files/image.jpg 1x, /_ipx/f_webp&s_496x354/https://www.domain.com/files/image.jpg 2x"
as you can notice in the server the first image value doesn't have the "1x"!
in the nuxt.config I have set "densities: [1,2]"
and in the template I have set the Nuxt image like this:
<nuxt-img densities="x1 x2" format="webp" :src="image" :alt="imageAlt" width="120" height="75" loading="lazy"/>
any suggestions why this happening and how I could fix it ?
thanks in advance Pachanca
