NuxtN
Nuxt•2w ago•
5 replies
LelouchFR

Hydration missmatch in my header creating error loading dynamically imported module

I get this error and I do'nt really know how to fix...

[Vue warn]: Hydration attribute mismatch on 
<img src="/logo.svg" width="75" alt="logo"> 
  - rendered on server: src="/logo.svg"
  - expected on client: src="/&/logo.svg"


My logo is a static svg (but I don't want to add it like the other svgs else my header would be a hustle to work on).

My logo is in the 
public
 folder. This error makes my app crash too, showing the error: error loading dynamically imported module: http://localhost:3000/_nuxt/layouts/blog.vue?t=1765747260002

Here is my header template:

<template>
    <header :class="['flex justify-between items-center py-3 px-6 fixed w-full bg-white/75 backdrop-blur-sm border-b border-blue-500 z-[9999] transition-all duration-500', scrolled ? 'translate-y-0' : '-translate-y-full', !heroElement && 'relative translate-y-0']">
        <NuxtLink to="/">
            <div class="flex gap-4 items-center">
                <img src="/logo.svg" width="75" alt="logo" />
                <p class="text-3xl text-blue-500 font-kode-mono max-sm:hidden">Baptiste Zahnow</p>
            </div>
        </NuxtLink>
        <nav class="max-md:hidden">
            <ul class="flex gap-6 text-xl items-center text-blue-500 font-kode-mono">
                <li class="hover:bg-lime-500 transition-all duration-200"><NuxtLink to="/#realisations">Réalisations</NuxtLink></li>
                <li class="hover:bg-lime-500 transition-all duration-200"><NuxtLink to="/blog">Blog</NuxtLink></li>
                <li class="hover:bg-lime-500 transition-all duration-200"><NuxtLink to="/contact">Contact</NuxtLink></li>
                <li class="bg-blue-500 hover:bg-lime-500 text-white hover:text-blue-500 transition-all duration-200 cursor-pointer" v-if="userCookie" @click="clearConnexionCookie">Disconnect</li>
            </ul>
        </nav>
    </header>
</template>
Was this page helpful?