want some magic ? An image is switched with another one on client side

hlassiege commented 2 months ago

Environment

Working directory: C:/Dev/src/divers/bloggr-galaxy/bug-nuxt-content Nuxt project info:

Operating System: Windows_NT
Node Version: v18.18.2
Nuxt Version: 3.11.2
CLI Version: 3.11.1
Nitro Version: 2.9.6
Package Manager: npm@9.8.1
Builder: -
User Config: devtools, modules, image, content
Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @nuxt/content@2.13.1, @nuxt/image@1.7.0
Build Modules: -

Reproduction

It is possible to reproduce the problem with this repository : https://github.com/bloggrify/bug-nuxt-content

You can install dependencies :

   npm install

then launch the server

   npm run dev

and go to http://localhost:3000

Describe the bug

It is possible to reproduce the problem with this repository : https://github.com/bloggrify/bug-nuxt-content

You can install dependencies :

   npm install

then launch the server

   npm run dev

and go to http://localhost:3000

You should have a blog post made with nuxt-content. The content of the blog post is in content/index.md

At the middle of the post, you should have this section :

The image should be memory-84.png but it's heap.jpg

When the page is loading, it's the correct image. But it change on the client side to the bad one.

You can see the result on this video The image is correct, and then it change to the bad one.

https://github.com/user-attachments/assets/179ac8be-378b-4aa9-bc16-14ee2e79228f

My assumptions so far :

I tried to override ProseImg When I remove this file, it works. But the code is extremely similar to the one in nuxt-mdc module and it should work.

Most of the time, it works. On the other images on the same blog post, it works. On other pages on my own blog, it works. But on this blog post only, and for this image only, it don't work.

I'm fighting magic all day and I don't get it ^^.

Additional context

No response

Logs

No response

nobkd commented 2 months ago

Looks something like hydration mismatch between server and client. (Is logged in the browser console, and after my fix idea, there are still some) I think there were some similar issues listed here before.

In your case, you could try to wrap your <ProseImg>-component with a <div> (or something similar), so it has a single root node, instead of multiple ones. (At least it worked for me)

components/content/prose/ProseImg.vue

<template>
+   <div>
       <!-- your multiple html elements next to each other -->
+   </div>
</template>

Hope it helps. If not, it was at least worth a try.

hlassiege commented 2 months ago

whaouh, indeed. It works

It's a kind of magic to me ^^

I don't understand what happened, and how it solved the problem :)

But it's great

nuxt / content