diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 61ea616e50..f3e64f28c2 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -279,7 +279,9 @@ function handleLoading(
         if (process.env.NODE_ENV !== 'production') {
           if (img.parentElement?.parentElement) {
             const parent = getComputedStyle(img.parentElement.parentElement)
-            if (layout === 'responsive' && parent.display === 'flex') {
+            if (!parent.position) {
+              // The parent has not been rendered to the dom yet and therefore it has no position. Skip the warnings for such cases.
+            } else 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.`
               )