[Vue warn]: Hydration attribute mismatch on - Vue 3.4.x

[or2e]

Reproduction: https://image.nuxt.com/playground

Warnings

[miladshakerdn]

This is my solution that prevents this warning for now. It is not a principled way, of course If the following attributes are set, we will no longer encounter a warning

• width and height to specify the dimensions of the image
• loading to lazy
• ismap to an empty string
• decoding to auto

Here is an example of how to use these attributes:

<NuxtImg src="imageSrc"
  width="1080"
  height="1080"
  loading="lazy"
  ismap=""
  decoding="auto"
/>

[hs-wolf]

This is my solution that prevents this warning for now. It is not a principled way, of course If the following attributes are set, we will no longer encounter a warning

* `width` and `height` to specify the dimensions of the image

* `loading` to `lazy`

* `ismap` to an empty string

* `decoding` to `auto`

Here is an example of how to use these attributes:

<NuxtImg src="imageSrc"
  width="1080"
  height="1080"
  loading="lazy"
  ismap=""
  decoding="auto"
/>

It works indeed, but then you won´t be able to configure It properly with css like adding object-fit if the initial w/h arent the aspect ratio you need.

[adiramardiani]

It's just me or all experiencing it, every time there is an increase in nuxt versions and other libraries always cause problems, even official library

"nuxt": "^3.9.0" > "nuxt": "^3.9.1" have problem "nuxt": "^3.7" > "nuxt": "^3.8" have problem "nuxt": "^3.6" > "nuxt": "^3.7" have problem or other slower issue

And this library also shows the same thing. Every time there is a version increase at the minor level, even I have to look at the change log, even if my configuration is not in breaking changes there are still always problems

Currently our application is still in the development stage, and I think it is natural that we will continue to implement the latest version

Moreover, CI/CD allows increments for minor versions due to our set of package.json (^), but this will cause problems if every increment always has a problem

It's not funny when I have to set dependencies from "@nuxt/image": "^1.1.0" to just strict "@nuxt/image": "1.1.0"

Maybe for this dependency warning is not too much of a problem because it can still run, but come on when we deploy CI/CD from 3.9 to 3.9.1 (automatically because ^) and cause problems, this small and trivial thing sparks fire again for our deloyment workflow

[ThePlastic]

This is my solution that prevents this warning for now. It is not a principled way, of course If the following attributes are set, we will no longer encounter a warning

* `width` and `height` to specify the dimensions of the image

* `loading` to `lazy`

* `ismap` to an empty string

* `decoding` to `auto`

Here is an example of how to use these attributes:

<NuxtImg src="imageSrc"
  width="1080"
  height="1080"
  loading="lazy"
  ismap=""
  decoding="auto"
/>

It works indeed, but then you won´t be able to configure It properly with css like adding object-fit if the initial w/h arent the aspect ratio you need.

I solved it the same way, it was sufficient to set a value for the attributes to suppress the warnings, in my case it was not necessary to enter ismap as an empty string.

From the tests I have carried out, these are the attributes that must be valorised in order not to incur warnings:

• width
• height
• loading
• deconding

it is a bit annoying not to be able to leave those attributes with default values

It is worth noting that both lazy and decoding accept strings so the two attributes will have to be valued, for example, as follows: :loading="'lazy'" :decoding="'auto'"

[c-schwan]

Issue is resolved in 3.4.11

[ThePlastic]

Issue is resolved in 3.4.11

Thanks

[vvatlin]

Still has the same issue, Vue 3.4.38