Next.js Image组件onLoadingComplete属性不生效如何解决？

问题原因 #

你直接写内联console.log可以触发回调，说明onLoadingComplete属性本身调用正常，问题出在自定义函数的引用稳定性或作用域问题，Next.js Image组件的事件监听会依赖回调函数的引用，若组件重渲染时函数引用发生变化，会导致绑定失效。另外注意onLoadingComplete的回调参数是原生<img> DOM元素，而非事件对象，无需通过target读取属性。

解决步骤 #

1. 使用useCallback包裹自定义回调函数，固定函数引用：

import { useCallback } from 'react';
import Image from 'next/image';

// 组件内部代码
const handleImageLoad = useCallback((img) => {
  console.log("load", img);
  // 直接读取自然宽高
  console.log("naturalWidth", img.naturalWidth);
  console.log("naturalHeight", img.naturalHeight);
}, []);

2. 绑定回调时直接传入函数引用，不需要额外包裹匿名函数：

<Image
  onLoadingComplete={handleImageLoad}
  className=""
  src={image["data_url"]}
  alt=""
  layout="fill"
  objectFit="contain"
/>

3. 如果回调依赖组件内部的状态/变量，需要把对应变量加入useCallback的依赖数组中，避免闭包问题导致的逻辑异常。
4. 若使用Next.js 13+ App Router，可临时给图片src添加随机查询参数绕过本地缓存，验证回调是否能正常触发。

内容的提问来源于stack exchange，提问作者hellomello