0

I am new to NextJS. I just saw this new image optimization feature in the NextJS documentation, but it doesn't work for me.

Here's my code. The part that works and the part that doesn't is specified in the code.

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;

The error I am getting is this:

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

Can anyone help me to solve this problem?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Pranta
  • 2,928
  • 7
  • 24
  • 37

3 Answers3

1

You must have configured path for images in next.config.js file, like below, which isn't required:

module.exports = {
  images: {
    domains: ["localhost"],
    // next line is not required
    path: 'http://localhost:3000/images'
  }
};

You don't need to configure path attribute unless you have a third party image provider, see the documentation here

Vrajpal Jhala
  • 231
  • 3
  • 8
  • But I never created a config file – Pranta Nov 10 '20 at 15:54
  • @PRANTADutta That is strange, I tried with this configs and got the same error so I figured this might be the issue. Could you reproduce this issue in a sandbox? it'd be easier to help :) – Vrajpal Jhala Nov 12 '20 at 04:33
  • I tried to create this issue in the sandbox. But it was working but it's not working on my computer. WTF ...... – Pranta Nov 15 '20 at 10:56
0

Does it work if you put the images in the root of the /public folder? (Instead of /public/images)

Andreas
  • 83
  • 1
  • 1
  • 12
0

try to specify the name of the backward folder too. let's say your file is coming from public folder then tr "/images/sure_cash_logo.png",

user10553954
  • 1
  • 1
  • 1
    try to specify the name of the backward folder too. let's say your file is coming from public folder then "/public/images/sure_cash_logo.png", – user10553954 Feb 20 '23 at 06:19