Update onLoadingComplete for next/future/image to receive referen…

…ce to `<img>`
vercel · Sep 7, 2022 · ed9afb4 · ed9afb4
1 parent 084ad96
commit ed9afb4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md
@@ -7,11 +7,11 @@ description: Try the latest Image Optimization with the new `next/future/image`
 <details>
   <summary><b>Version History</b></summary>
 
-| Version   | Changes                                                                                                                     |
-| --------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. |
-| `v12.2.4` | `fill` property added.                                                                                                      |
-| `v12.2.0` | Experimental `next/future/image` component introduced.                                                                      |
+| Version   | Changes                                                                                                                                                          |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. `onLoadingComplete` receives `<img>` |
+| `v12.2.4` | `fill` property added.                                                                                                                                           |
+| `v12.2.0` | Experimental `next/future/image` component introduced.                                                                                                           |
 
 </details>
 
@@ -33,6 +33,7 @@ Compared to `next/image`, the new `next/future/image` component has the followin
   - Removes `lazyRoot` prop since there is no native equivalent
 - Removes `loader` config in favor of [`loader`](#loader) prop
 - Changed `alt` prop from optional to required
+- Changed `onLoadingComplete` callback to receive reference to `<img>` element
 
 ## Known Browser Bugs
 
@@ -306,10 +307,7 @@ Also keep in mind that the required `width` and `height` props can interact with
 
 A callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed.
 
-The callback function will be called with one argument, an object with the following properties:
-
-- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)
-- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)
+The callback function will be called with one argument, a reference to the underlying `img` element.
 
 ### onLoad
 

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
@@ -47,10 +47,7 @@ type ImageLoaderPropsWithConfig = ImageLoaderProps & {
 
 type PlaceholderValue = 'blur' | 'empty'
 
-type OnLoadingComplete = (result: {
-  naturalWidth: number
-  naturalHeight: number
-}) => void
+type OnLoadingComplete = (img: HTMLImageElement) => void
 
 type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
 
@@ -265,10 +262,7 @@ function handleLoading(
       setBlurComplete(true)
     }
     if (onLoadingCompleteRef?.current) {
-      const { naturalWidth, naturalHeight } = img
-      // Pass back read-only primitive values but not the
-      // underlying DOM element because it could be misused.
-      onLoadingCompleteRef.current({ naturalWidth, naturalHeight })
+      onLoadingCompleteRef.current(img)
     }
     if (process.env.NODE_ENV !== 'production') {
       if (img.getAttribute('data-nimg') === 'future-fill') {

diff --git a/test/integration/image-future/default/pages/on-loading-complete.js b/test/integration/image-future/default/pages/on-loading-complete.js
@@ -105,13 +105,16 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) {
       <div className="wrap">
         <Image
           id={`img${id}`}
-          onLoadingComplete={({ naturalWidth, naturalHeight }) => {
+          onLoadingComplete={(img) => {
+            const { naturalWidth, naturalHeight } = img
             let count = idToCount[id] || 0
             count++
             idToCount[id] = count
             setIdToCount(idToCount)
             setMsg(
-              `loaded ${count} img${id} with dimensions ${naturalWidth}x${naturalHeight}`
+              `loaded ${count} ${
+                img instanceof Image ? 'img' : ''
+              }${id} with dimensions ${naturalWidth}x${naturalHeight}`
             )
           }}
           {...props}