-
-
Notifications
You must be signed in to change notification settings - Fork 181
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Example in README > Examples > Avoid Hydration Mismatch > Images does not work on initial load #311
Comments
davidde
changed the title
[Bug]: Example in README >
[Bug]: Example in README > Examples > Avoid Hydration Mismatch > Images does not work on initial load
Sep 4, 2024
Examples
> Avoid Hydration Mismatch
> Images
does not work on initial load
try to set same size container to the image element to avoid shifting 'use client'
import { useTheme } from "next-themes";
import type { ImageProps } from "next/image";
import Image from "next/image";
import { useEffect, useState } from "react";
type Props = Omit<ImageProps, "src" | "priority" | "loading"> & {
srcLight: string;
srcDark: string;
};
const ThemedImage = (props: Props) => {
const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const { srcLight, srcDark, ...rest } = props;
let srcImage;
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
switch (resolvedTheme) {
case "light":
srcImage = srcLight;
break;
case "dark":
srcImage = srcDark;
break;
default:
srcImage = srcLight;
break;
}
return (
<Image
src={srcImage}
{...rest}
/>
);
};
export default ThemedImage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What happened?
This code from the README causes
Warning: Prop 'loading' did not match. Server: "null" Client: "lazy"
:It does not render the image on initial load or page refresh.
I noticed it works with the
useEffect/setMounted
hack, but this causes other problems like layout shift. Is there a fix for this?Version
^0.3.0
What browsers are you seeing the problem on?
Firefox, Chrome
The text was updated successfully, but these errors were encountered: