Fix Show error when user put wrong values in width or height

packages/next/client/image.tsx

@@ -360,6 +360,14 @@ export default function Image({
         ).join(',')}.`
       )
     }
+    if (
+      layout !== 'fill' &&
+      (isNaN(widthInt) || isNaN(heightInt))
+    ) {
+      throw new Error(
+        `Image with src "${src}" has invalid "width" or "height" property. These should be numeric values.`
+      )
+    }
     if (!VALID_LOADING_VALUES.includes(loading)) {
       throw new Error(
         `Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
@@ -373,7 +381,7 @@ export default function Image({
       )
     }
     if (placeholder === 'blur') {
-      if ((widthInt || 0) * (heightInt || 0) < 1600) {
+      if (layout !== 'fill' && (widthInt || 0) * (heightInt || 0) < 1600) {
         console.warn(
           `Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`
         )

test/integration/image-component/default/pages/invalid-weight-or-height.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <div>
+      <p>Invalid width or height</p>
+
+      <Image
+        src="/test.jpg"
+        width="fill"
+        height="fill"
+        layout="responsive"
+        placeholder="blur"
+        blurDataURL="/test.jpg"
+      />
+    </div>
+  )
+}

test/integration/image-component/default/test/index.test.js

@@ -494,6 +494,15 @@ function runTests(mode) {
       )
     })
 
+    it('should show error when not numeric string width or height', async () => {
+      const browser = await webdriver(appPort, '/invalid-weight-or-height')
+
+      expect(await hasRedbox(browser)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        `Image with src "/test.jpg" has invalid "width" or "height" property. These should be numeric values.`
+      )
+    })
+
     it('should show error when static import and placeholder=blur and blurDataUrl is missing', async () => {
       const browser = await webdriver(
         appPort,