**编辑：**v11.1.3-canary.33修复

如果src是一个数据URI，那么next/image组件似乎没有调用onLoadingComplete处理程序（我可以看到您已经打开了一个问题here）。
现在的解决方法是使用Object URLs。如果你愿意，你可以直接实现它。参考this thread或链接的问题。
如果你想继续使用react-images-uploading，你可以使用this thread和其他方法中提到的方法，将提供的数据URI转换为对象URL，然后将其作为src传递给next/image。显然，这将是更高性能的操作，而不是自己处理上传的文件。
下面是一个工作示例：https://codesandbox.io/s/jolly-ellis-4htdl?file=/pages/index.js
只是为了完整起见添加了一个替代方案：

import { useState } from "react";
import Image from "next/image";

const IndexPage = () => {
  const [src, setSrc] = useState("");

  const handleChange = (e) => {
    setSrc(URL.createObjectURL(e.target.files[0]));
    return true;
  };

  const handleImageLoad = (e) => {
    console.log("load", e);
  };

  return (
    <>
      <input
        type="file"
        id="foo"
        name="foo"
        accept="image/png, image/jpeg"
        onChange={handleChange}
      />
      <div
        style={{
          marginTop: "1rem",
          width: 600,
          height: 600,
          backgroundColor: "blue",
          position: "relative"
        }}
      >
        {src?.length > 0 && (
          <Image
            onLoadingComplete={(e) => {
              handleImageLoad(e);
            }}
            src={src}
            alt=""
            layout="fill"
            objectFit="contain"
          />
        )}
      </div>
    </>
  );
};

export default IndexPage;

字符串

我遇到了一个类似的错误，我试图使图像可见，只有当它被加载。
如果将样式设置为display:none，则不会调用onLoadingComplete，如下所示：

<Image

    ...

    style={{
        display: "none"
    }}

    onLoadingComplete={(img) => { // this will not be invoked
        img.style.opacity = "block"
    }}
/>

字符串
为了解决这个问题，我必须设置一个不同的样式和定义一个空的onError函数（没有它，onLoadingComplete将被调用，无论图像源是有效还是无效，即损坏的图像）

<Image

    ...

    style={{
        visibility: "hidden",
        maxHeight: "0",
        maxWidth: "0"
    }}

    onLoadingComplete={(img) => {
        img.style.visibility = "visible"
        img.style.maxHeight = "none"
        img.style.maxWidth = "none"
    }}

    onError={() => {}}
/>

型

• 这是针对Next.js -v13.5.3* 测试的