Nuxt•4w ago•

6 replies

[Vue warn]: Hydration attribute mismatch on <img src="/logo.svg" width="75" alt="logo">

nuxt4

I have my logo in the

/public/logo.svg

/public/logo.svg

place, but for I don't know what reason, I get a hydration missmatch because it has been changed to

src="/&/logo.svg"

src="/&/logo.svg"

. I have other files at the root of public and they don't have this problem at all... why does this happen only to this file and how can I fix it ?

After refreshing the page, the logo comes back to be seen, but still getting this hydration attr missmatch...

This is what i get in the console:

 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM

 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM

This is what is encapsulating my

logo.svg

logo.svg

(it's in a

HeaderNav.vue

HeaderNav.vue

component):

        <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">text</p>
            </div>
        </NuxtLink>

        <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">text</p>
            </div>
        </NuxtLink>

For example, the icon.svg is the one used as a favicon, this one gets no problem to be seen and doesn't get an error for it.

  public
    assets
    forms
    󰜡 icon.svg
    󰜡 logo.svg
    󰚩 robots.txt

  public
    assets
    forms
    󰜡 icon.svg
    󰜡 logo.svg
    󰚩 robots.txt

if anyone can help me with this problem, it would be very helpfull

Nuxt•4w ago•

6 replies

LelouchFR

[Vue warn]: Hydration attribute mismatch on <img src="/logo.svg" width="75" alt="logo">

nuxt4

I have my logo in the

/public/logo.svg

/public/logo.svg

place, but for I don't know what reason, I get a hydration missmatch because it has been changed to

src="/&/logo.svg"

src="/&/logo.svg"

 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM

 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:29:37 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM
 WARN  [Vue Router warn]: No match found for location with path "/&/logo.svg"               10:31:31 AM

This is what is encapsulating my

logo.svg

logo.svg

(it's in a

HeaderNav.vue

HeaderNav.vue

component):

        <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">text</p>
            </div>
        </NuxtLink>

        <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">text</p>
            </div>
        </NuxtLink>

For example, the icon.svg is the one used as a favicon, this one gets no problem to be seen and doesn't get an error for it.

  public
    assets
    forms
    󰜡 icon.svg
    󰜡 logo.svg
    󰚩 robots.txt

  public
    assets
    forms
    󰜡 icon.svg
    󰜡 logo.svg
    󰚩 robots.txt

if anyone can help me with this problem, it would be very helpfull

[Vue warn]: Hydration attribute mismatch on <img src="/logo.svg" width="75" alt="logo">

[Vue warn]: Hydration attribute mismatch on <img src="/logo.svg" width="75" alt="logo">

Similar Threads

Similar Threads

Similar Threads