Update warning when parent styles break next/image

Author: styfle

packages/next/client/image.tsx

@@ -269,15 +269,17 @@ function handleLoading(
           onLoadingComplete({ naturalWidth, naturalHeight })
         }
         if (process.env.NODE_ENV !== 'production') {
-          const parent = img.parentElement?.parentElement?.style
-          if (layout === 'responsive' && parent?.display === 'flex') {
-            console.warn(
-              `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
-            )
-          } else if (layout === 'fill' && parent?.position !== 'relative') {
-            console.warn(
-              `Image with src "${src}" may not render properly with a parent using position:"${parent?.position}". Consider changing the parent style to position:"relative" with a width and height.`
-            )
+          if (img.parentElement?.parentElement) {
+            const parent = getComputedStyle(img.parentElement.parentElement)
+            if (layout === 'responsive' && parent.display === 'flex') {
+              console.warn(
+                `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
+              )
+            } else if (layout === 'fill' && parent.position !== 'relative') {
+              console.warn(
+                `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
+              )
+            }
           }
         }
       })