Next.js Image组件切换图片时加载Spinner不显示问题求助

问题现象 #

在随机电影生成器中使用自定义ImageComponent展示图片，首次加载时加载Spinner可正常显示，但切换新电影时，旧图片会一直保留直到新图片加载完成，无法显示加载Spinner。

原因分析 #

1. 组件调用方式错误：页面中直接以函数调用方式{MovieImageComponent(movie.primaryImage)}使用组件，而非标准JSX标签写法，导致组件状态无法随props更新正确重置。
2. loading状态未随图片URL变化重置：ImageComponent的loading状态仅在组件初始化时设为true，当切换电影导致图片URL改变时，loading仍保持false，因此旧图片不会隐藏，Spinner也不会显示。

解决方案 #

1. 修正组件调用方式 #

将页面中直接调用组件函数的写法改为标准JSX标签形式，确保组件能正确响应props变化：

修改Page组件中的代码：

// 原写法
{MovieImageComponent(movie.primaryImage)}

// 修改为
<MovieImageComponent image={movie.primaryImage} />

2. 监听图片URL变化，重置loading状态 #

在ImageComponent中添加useEffect，监听传入的图片URL，当URL改变时立即将loading设为true，触发Spinner显示并隐藏旧图片：

修改后的ImageComponent代码：

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

export default function ImageComponent({ image }: { image: PrimaryImage }) {
  const [loading, setLoading] = useState(true);

  // 监听图片URL变化，重置loading状态
  useEffect(() => {
    setLoading(true);
  }, [image.url]);

  function onImageLoad() {
    setLoading(false);
    console.log("loaded");
  }

  return (
    <div className="relative h-full m-auto">
      <div style={{ display: loading ? "block" : "none" }}>
        Loading Spinner goes here
      </div>
      <Image
        className="object-contain"
        src={image.url}
        alt="Movie poster"
        fill
        onLoad={onImageLoad}
        priority
        style={{ display: loading ? "none" : "block" }}
      />
    </div>
  );
}

补充说明 #

• 使用JSX标签调用组件是React的标准用法，能确保组件的生命周期和状态管理正常工作。
• 通过useEffect监听image.url的变化，每次切换电影时都会触发loading状态重置，从而在新图片加载过程中显示Spinner，隐藏旧图片。

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