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.
5 Replies
hight="40px" maybe
change to height="40px"
Thanks. I didn't notice this, but it didn't help. The issue is pretty strange. If I change the width, for example, from 115 to 116, my image becomes visible, but then I refresh the browser, and the image is invisible again. Revert from 116 to 115 - visible, refresh - invisible. π
Hm, somehow, I have images in the HTML code, but the size is 0x0
It will be resolved in next Nuxt image release
@danielroe Wow. Thank you very much. 1.8.0 - working.
delighted to hear it! π