Hydration attribute mismatch with .webp
Hey all. I have some strange error: Hydration attribute mismatch with common <img src="~/assets/images/error.webp"> within v-for
[Vue warn]: Hydration attribute mismatch on <img class="_errorImage_1bk43_50" src="/_nuxt/error.DqG-qGzb.webp" alt="404">
- rendered on server: src="/_nuxt/error.DqG-qGzb.webp"
- expected on client: src="https://some-domain.com/_nuxt/error.DqG-qGzb.webp"
But if image is rather .png or .jpg there is no error nor warn...
3 Replies
Hi @fakie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I can help you with this hydration mismatch issue in Nuxt. This is a common problem when using webp images in Nuxt applications.
The error you're seeing occurs because the server is rendering the image with a relative path (
/_nuxt/error.DqG-qGzb.webp), but the client is expecting an absolute URL with your domain (<https://some-domain.com/_nuxt/error.DqG-qGzb.webp>). This mismatch between server and client rendering causes the hydration error.
The interesting part is that this only happens with .webp files but not with .png or .jpg files. This is likely because of how Nuxt processes different image formats during the build process.
Solutions:
1. Use Nuxt Image module: The recommended approach is to use the @nuxt/image module which handles these issues automatically:
Or if you want to support multiple formats:
The Nuxt Image module provides proper handling of different image formats including webp Link to Nuxt Image docs.
2. Move images to the public folder: If you don't want to use the Nuxt Image module, you can move your images to the public folder instead of assets. Images in the public folder are served directly without processing.
3. Create a local copy of the data: This hydration issue is related to how Vue 3 and Nuxt handle SSR hydration. When the server renders content differently than what the client expects, these mismatches occur. As mentioned in a Stack Overflow answer, making local copies of data can help prevent hydration mismatches Link to Stack Overflow.
4. Disable PWA in development: If you're using PWA modules like @vite-pwa/nuxt, they can sometimes cause hydration issues. Consider disabling PWA in development mode Link to Stack Overflow.
Vue 3.4 and Nuxt 3.9+ have improved hydration error reporting, making these issues easier to debug, but the underlying causes still need to be addressed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@802920840081440838> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@fakie can you raise an issue?