N
Nuxtβ€’3mo ago
VVadim

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
πŸ‡¨πŸ‡­ Marko Bolliger <cannap>
hight="40px" maybe change to height="40px"
VVadim
VVadimOPβ€’3mo ago
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
danielroe
danielroeβ€’3mo ago
It will be resolved in next Nuxt image release
VVadim
VVadimOPβ€’3mo ago
@danielroe Wow. Thank you very much. 1.8.0 - working.
danielroe
danielroeβ€’3mo ago
delighted to hear it! 😊
Want results from more Discord servers?
Add your server