NuxtImg - Hydration attribute mismatch on
Hello. What do I do wrong?
I have such code:
<NuxtLink to="/">
<NuxtImg
alt="main logo"
densities="x1 x2"
hight="40px"
src="/images/logo_header.svg"
width="115px"
/>
</NuxtLink>
And this image is not rendered, I also have an error in the console:
[Vue warn]: Hydration attribute mismatch on
<img onerror="this.setAttribute('data-error', 1)" hight="40px" src="/_ipx/w_115/images/logo_header.svg" data-v-inspector="node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:2:3">
- rendered on server: (not rendered)
- expected on client: width="115"
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.
If I remove NuxtLink, the image will be rendered, but I still have the error above.
Nuxt and Vue - latest versions.
I have such code:
<NuxtLink to="/">
<NuxtImg
alt="main logo"
densities="x1 x2"
hight="40px"
src="/images/logo_header.svg"
width="115px"
/>
</NuxtLink>
And this image is not rendered, I also have an error in the console:
[Vue warn]: Hydration attribute mismatch on
<img onerror="this.setAttribute('data-error', 1)" hight="40px" src="/_ipx/w_115/images/logo_header.svg" data-v-inspector="node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:2:3">
- rendered on server: (not rendered)
- expected on client: width="115"
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.
If I remove NuxtLink, the image will be rendered, but I still have the error above.
Nuxt and Vue - latest versions.
