Improve error message on next/future/image when objectFit or objectPosition

packages/next/client/future/image.tsx

@@ -358,13 +358,34 @@ const ImageElement = ({
         loading={loading}
         style={{ ...imgStyle, ...blurStyle }}
         ref={useCallback(
-          (img: ImgElementWithDataProp) => {
+          (img: ImgElementWithDataProp | null) => {
+            if (!img) {
+              return
+            }
             if (process.env.NODE_ENV !== 'production') {
-              if (img && !srcString) {
+              if (!srcString) {
                 console.error(`Image is missing required "src" property:`, img)
               }
+              if (
+                img.getAttribute('objectFit') ||
+                img.getAttribute('objectfit')
+              ) {
+                console.error(
+                  `Image has unknown prop "objectFit". Did you mean to use the "style" prop instead?`,
+                  img
+                )
+              }
+              if (
+                img.getAttribute('objectPosition') ||
+                img.getAttribute('objectposition')
+              ) {
+                console.error(
+                  `Image has unknown prop "objectPosition". Did you mean to use the "style" prop instead?`,
+                  img
+                )
+              }
             }
-            if (img?.complete) {
+            if (img.complete) {
               handleLoading(
                 img,
                 srcString,
@@ -653,17 +674,6 @@ export default function Image({
       )
     }
 
-    if ('objectFit' in rest) {
-      throw new Error(
-        `Image with src "${src}" has unknown prop "objectFit". This style should be specified using the "style" property.`
-      )
-    }
-    if ('objectPosition' in rest) {
-      throw new Error(
-        `Image with src "${src}" has unknown prop "objectPosition". This style should be specified using the "style" property.`
-      )
-    }
-
     if (placeholder === 'blur') {
       if ((widthInt || 0) * (heightInt || 0) < 1600) {
         warnOnce(

test/integration/image-future/default/pages/invalid-objectfit.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Image from 'next/future/image'
+
+const Page = () => {
+  return (
+    <div>
+      <Image
+        src="/test.jpg"
+        width="400"
+        height="400"
+        objectFit="contain"
+        objectPosition="20% 20%"
+      />
+    </div>
+  )
+}
+
+export default Page

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

@@ -852,6 +852,24 @@ function runTests(mode) {
       )
       expect(warnings.length).toBe(1)
     })
+
+    it('should show console error for objectFit and objectPosition', async () => {
+      const browser = await webdriver(appPort, '/invalid-objectfit')
+
+      expect(await hasRedbox(browser)).toBe(false)
+
+      await check(async () => {
+        return (await browser.log('browser'))
+          .map((log) => log.message)
+          .join('\n')
+      }, /Image has unknown prop "objectFit"/gm)
+
+      await check(async () => {
+        return (await browser.log('browser'))
+          .map((log) => log.message)
+          .join('\n')
+      }, /Image has unknown prop "objectPosition"/gm)
+    })
   } else {
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {