Astro Info

Astro                    v4.1.2
Node                     v20.10.0
System                   Windows (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When passing any sort of image to a React component (such as Astro's Image component or a simple <img> element), specifically when the client directive is used, the image will appear for a split second before disappearing. Looking at the console shows an error:
Warning: An error occurred during hydration. The server HTML was replaced with client content in <astro-island>. So it seems Astro is replacing the content. The component works perfectly if hydration is not used, but this kind of defeats the purpose of using react here.

My example below shows multiple different image variations that I tried to pass as children to a React component.

What's the expected result?

The Image should be handed off to React without issues as if it was any other child.

Link to Minimal Reproducible Example

sandbox

Participation

• I am willing to submit a pull request for this issue.