Update warning when parent styles break next/image (#28517)

- Follow up to #28221 - Fixes #27644
vercel · Aug 26, 2021 · d8093ec · d8093ec
1 parent ed6ce1a
commit d8093ec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/next/client/image.tsx b/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.`
+              )
+            }
           }
         }
       })

diff --git a/test/integration/image-component/default/pages/layout-responsive-inside-flex.js b/test/integration/image-component/default/pages/layout-responsive-inside-flex.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
 import img from '../public/test.jpg'
+import style from '../style.module.css'
 
 const Page = () => {
   return (
-    <div style={{ display: 'flex' }}>
+    <div className={style.displayFlex}>
       <Image id="img" layout="responsive" src={img} />
     </div>
   )

diff --git a/test/integration/image-component/default/style.module.css b/test/integration/image-component/default/style.module.css
@@ -0,0 +1,3 @@
+.displayFlex {
+  display: flex;
+}