Image Component flicker when refresh the page

Link to the code that reproduces this issue

https://github.com/jizhi0v0/background-image-flash.git

To Reproduce

1.Start the application in development (next dev)
2.refresh the page
3.image flash

Current vs. Expected behavior

https://github.com/user-attachments/assets/a6098447-ed5a-4530-ad2b-1dd4aa7e7581

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Mon Sep 30 00:10:38 PDT 2024; root:xnu-11215.40.63~39/RELEASE_ARM64_T6031
  Available memory (MB): 36864
  Available CPU cores: 14
Binaries:
  Node: 22.3.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Also exist in latest canary version.

Start by running the linked reproduction project with next dev and refreshing the page to confirm the image flash. Investigate the next/image behavior in the development stage and compare it with the latest canary version. Done means the reproduction no longer flickers on refresh while preserving expected image loading behavior.