Skip to content

SSR: Hydration attribute mismatch in HTML on <img> with dynamic alt attribute #14370

@mrleblanc101

Description

@mrleblanc101

Vue version

3.5.27

Link to minimal reproduction

https://stackblitz.com/~/github.com/mrleblanc101/repro-nuxt-i18n-node-mismatch?file=app/pages/index.vue

Steps to reproduce

If I add :alt="t('Ville de Québec l’accent d’Amérique')" this to my <img src="...">, then I get a Hydration attribute mismatch if i run pnpm build && pnpm preview.

<img
    class="quebec-city-logo"
    src="@/assets/img/ville-quebec.svg"
    :alt="t('Ville de Québec l’accent d’Amérique')"
    width="276"
    height="81"
/>

Hydration attribute mismatch on <img class="quebec-city-logo" src="/_nuxt/ville-quebec.Ctek8D92.svg" alt="Partenaires" width="276" height="81">

Everything is fine if I run pnpm run dev.

Image

Notice that, on the server-side, the domain is not in the url, but on the client it is.
I think this is what is causing the mismatch.

These alt don't seem to cause problem:

<img
    class="quebec-city-logo"
    src="@/assets/img/ville-quebec.svg"
    :alt="'Ville de Québec l’accent d’Amérique'"
    width="276"
    height="81"
/>
<img
    class="quebec-city-logo"
    src="@/assets/img/ville-quebec.svg"
    alt="Ville de Québec l’accent d’Amérique"
    width="276"
    height="81"
/>

What is expected?

No hydration mismatch

What is actually happening?

Hydration mismatch

System Info

System:
    OS: macOS 26.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 169.63 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.4.1 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/node
    npm: 11.4.2 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/npm
    pnpm: 10.14.0 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/pnpm
  Browsers:
    Chrome: 144.0.7559.97
    Chrome Canary: 146.0.7654.0
    Edge: 144.0.3719.92
    Firefox: 146.0
    Safari: 26.2
  npmPackages:
    vue: ^3.5.27 => 3.5.27

Any additional comments?

Relates to nuxt/nuxt#34207
Relates to nuxt-modules/i18n#3881

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions