[Bug]: Example in README > Examples > Avoid Hydration Mismatch > Images does not work on initial load

[davidde]

What happened?

This code from the README causes Warning: Prop 'loading' did not match. Server: "null" Client: "lazy":

import Image from 'next/image'
import { useTheme } from 'next-themes'

function ThemedImage() {
  const { resolvedTheme } = useTheme()
  let src

  switch (resolvedTheme) {
    case 'light':
      src = '/light.png'
      break
    case 'dark':
      src = '/dark.png'
      break
    default:
      src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
      break
  }

  return <Image src={src} width={400} height={400} />
}

export default ThemedImage

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