image - NextJS 画像コンポーネントと画像最適化が機能しない

Question

私はNextJSが初めてです。NextJS のドキュメントでこの新しい画像最適化機能を見たのですが、うまくいきません。

これが私のコードです。動作する部分と動作しない部分をコードで指定します。

import Image from "next/image";

interface sponsorsProps {}

const Sponsors: React.FC<sponsorsProps> = ({}) => {
  return (
    <section className="bg-img-with-opacity2 pt-10">
      <div className="container text-gray-400">
        <div className="flex justify-center items-center">
          <h2 className="text-4xl font-bold">Our Verified Sponsors</h2>
        </div>

        <div className="grid grid-cols-4 gap-5">
          {images &&
            images.map((img) => {
              return (
                <div className="p-5 mt-5 text-center" key={img.img}>
                  <div className="flex justify-center items-center mb-4">
                      {/* This doesn't work */}
                    <Image
                      src={img.img}
                      alt="provider image"
                      width={500}
                      height={500}
                    ></Image>
                    {/* This works */}
                    <img
                      src={img.img}
                      className="bg-mint text-mint fill-current"
                      alt="provider image"
                    />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </section>
  );
};

const images = [
  {
    img: "/images/bkash.png",
  },
  {
    img: "/images/nogod.png",
  },
  {
    img: "/images/rocket.png",
  },
  {
    img: "/images/sure_cash_logo.png",
  },
];

export default Sponsors;

私が得ているエラーはこれです：

images:1 GET http://localhost:3000/images?url=%2Fimages%2Frocket.png&w=640&q=75 404 (Not Found)

誰でもこの問題を解決するのを手伝ってもらえますか?