NextJS Image Component and Image Optimization is not working

Question

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?

public folder. In there I have an image folder and the image are inside that folder. You can see that in the code specified in the images array. — Pranta
– Pranta, Commented Nov 9, 2020 at 13:30

Vrajpal Jhala · Accepted Answer · 2020-11-10 14:28:47Z

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

answered Nov 10, 2020 at 14:28

Vrajpal Jhala

2903 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pranta Over a year ago

But I never created a config file

Vrajpal Jhala Over a year ago

@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 :)

Pranta Over a year ago

I tried to create this issue in the sandbox. But it was working but it's not working on my computer. WTF ......

Andreas · Accepted Answer · 2020-11-09 20:57:30Z

0

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

answered Nov 9, 2020 at 20:57

Andreas

1031 gold badge1 silver badge12 bronze badges

1 Comment

Pranta Over a year ago

No, it doesn't. Sorry for the late reply.

user10553954 · Accepted Answer · 2023-02-20 06:18:31Z

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",

answered Feb 20, 2023 at 6:18

user10553954

11 bronze badge

1 Comment

user10553954 Over a year ago

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",

Collectives™ on Stack Overflow

NextJS Image Component and Image Optimization is not working

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related