`next/image` `suppressHydrationWarning` for `width` and `height` props - JavaScript next.js

Describe the feature you'd like to request

I'm rendering a component like this:

<Image src={logo} width={logoSize} height={logoSize} />

On the server side, logoSize is 70, but on the client side it is 50 (because of screen size).

I get this annoying react error:

react-dom.development.js:67 Warning: Prop `src` did not match. Server: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+" Client: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+"

The feature I want to request is a way to stop this error, like the react dom suppressHydrationWarning prop.

Describe the solution you'd like

The easiest, intuitive way would be to use the suppressHydrationWarning for next/image, so it can be used like this:

<Image suppressHydrationWarning src={logo} width={logoSize} height={logoSize} />

Then next/image will pass the suppressHydrationWarning to whatever dom component it renders as a result of its props.

Describe alternatives you've considered

The alternative is just to ignore the react warning, but this is both ugly and can hide additional react props warnings. For example, if I have another props mismatch somewhere else, I won't get that error because the warning caused by <Image /> will be shown first, and the following warnings won't be shown.

Asked Oct 12 '21 19:10
avatar ChocolateLoverRaj

2 Answer:

Hi @ChocolateLoverRaj can you provide a CodeSandbox demo to understand this issue?

Answered Sep 30 '21 at 07:40
avatar  of gauravkrp

Hi, this hydration warning should not be ignored or suppressed as it causes the initial HTML to fail to be re-used and can cause the react tree to be out of sync. The same prop values should be used on the server that are used on the client for the initial render (hydration). You can update these props after hydration by using useEffect(() => { /* logic here */ }, []) which is called after hydration.

Answered Sep 30 '21 at 14:42
avatar  of ijjk