fix: should not warn when image unmounts

packages/next/src/client/image.tsx

@@ -276,7 +276,7 @@ function handleLoading(
   img['data-loaded-src'] = src
   const p = 'decode' in img ? img.decode() : Promise.resolve()
   p.catch(() => {}).then(() => {
-    if (!img.parentNode) {
+    if (!img.parentElement || !img.isConnected) {
       // Exit early in case of race condition:
       // - onload() is called
       // - decode() is called but incomplete

test/integration/next-image-new/default/pages/should-not-warn-unmount.js

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+
+export default function Home() {
+  const [displayImage, setDisplayImage] = useState(true)
+
+  useEffect(() => {
+    // This will cause the image to unmount.
+    // See https://github.com/vercel/next.js/issues/40762
+    setDisplayImage(false)
+  }, [])
+
+  return (
+    <main>
+      <h1>Should not warn on unmount</h1>
+      <section>
+        {displayImage ? (
+          <div style={{ position: 'relative', width: 10, height: 10 }}>
+            <Image priority fill src="/test.jpg" alt="alt" sizes="10px" />
+          </div>
+        ) : null}
+      </section>
+    </main>
+  )
+}

test/integration/next-image-new/default/test/index.test.ts

@@ -1167,6 +1167,16 @@ function runTests(mode) {
           'Image with src "/wide.png" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more:'
         )
       })
+      it('should not log warnings when image unmounts', async () => {
+        browser = await webdriver(appPort, '/should-not-warn-unmount')
+        await waitFor(1000)
+        const warnings = (await browser.log('browser'))
+          .map((log) => log.message)
+          .join('\n')
+        expect(warnings).not.toContain(
+          'Image with src "/test.jpg" has "fill" and parent element'
+        )
+      })
     }
   })
   // Tests that use the `unsized` attribute: