虽然，我找到了一个答案（？可能是旁路）从youtube，https://www.youtube.com/watch?v=zwQs4wXr9Bg&ab_channel=JackHerrington
我回答我的问题的人谁可能有类似的问题。
新代码使用Route Handlers获取图像。

app/page.tsx

import Image from "next/image";
import Gallery from "./ui/Gallery";
import SearchBar from "./ui/SearchBar";
import GalleryWrapper from "./ui/GalleryWrapper";
import { useState } from "react";

export default function Home() {
  const [isSearching, setIsSearching] = useState(false);
  return (
    <div className="max-w-5xl m-auto mt-10">
      <SearchBar setIsSearching={setIsSearching} />
      <Gallery isSearching={isSearching} />
    </div>
  );
}

字符串

ui/Gallery.tsx

import React, { use } from "react";
import Image from "next/image";

const getImages = async () => {
  let images = await fetch("http://localhost:3000/api");
  return images.json();
};

const fetchedImages = getImages();

const Gallery = ({ isSearching }: { isSearching: boolean }) => {
  const images = use(fetchedImages);
  return (
    <div className={`flex gap-2 ${isSearching ? "opacity-50" : ""}`}>
      {images.map((image: string) => (
        <Image key={image} src={image} width={200} height={200} alt={image} />
      ))}
    </div>
  );
};

export default Gallery;

型

ui/SearchBar.tsx

import React, { Dispatch, SetStateAction } from "react";

const SearchBar = ({
  setIsSearching,
}: {
  setIsSearching: Dispatch<SetStateAction<boolean>>;
}) => {
  return (
    <div>
      <input
        type="text"
        className="border rounded-md w-full mb-2"
        onFocus={() => setIsSearching(true)}
        onBlur={() => setIsSearching(false)}
      />
    </div>
  );
};

export default SearchBar;

型

API/route.ts

import { glob } from "glob";

export async function GET(request: Request) {
  let images = await glob("/images/*.png");
  return new Response(JSON.stringify(images));
}

型
欢迎您提出更好的想法或建议。