title: NextJS Image Component and Image Optimization is not working
body: <p>I am new to NextJS. I just saw this new image optimization feature in the NextJS documentation, but it doesn't work for me.</p>
  <p>Here's my code. The part that works and the part that doesn't is specified in the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Image from "next/image";
  
  interface sponsorsProps {}
  
  const Sponsors: React.FC&lt;sponsorsProps&gt; = ({}) =&gt; {
    return (
      &lt;section className="bg-img-with-opacity2 pt-10"&gt;
        &lt;div className="container text-gray-400"&gt;
          &lt;div className="flex justify-center items-center"&gt;
            &lt;h2 className="text-4xl font-bold"&gt;Our Verified Sponsors&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div className="grid grid-cols-4 gap-5"&gt;
            {images &amp;&amp;
              images.map((img) =&gt; {
                return (
                  &lt;div className="p-5 mt-5 text-center" key={img.img}&gt;
                    &lt;div className="flex justify-center items-center mb-4"&gt;
                        {/* This doesn't work */}
                      &lt;Image
                        src={img.img}
                        alt="provider image"
                        width={500}
                        height={500}
                      &gt;&lt;/Image&gt;
                      {/* This works */}
                      &lt;img
                        src={img.img}
                        className="bg-mint text-mint fill-current"
                        alt="provider image"
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                );
              })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    );
  };
  
  const images = [
    {
      img: "/images/bkash.png",
    },
    {
      img: "/images/nogod.png",
    },
    {
      img: "/images/rocket.png",
    },
    {
      img: "/images/sure_cash_logo.png",
    },
  ];
  
  export default Sponsors;</code></pre>
  </div>
  </div>
  </p>
  <p>The error I am getting is this:</p>
  <pre><code>images:1 GET http://localhost:3000/images?url=%2Fimages%2Frocket.png&amp;w=640&amp;q=75 404 (Not Found)
  </code></pre>
  <p>Can anyone help me to solve this problem?</p>