0

我是 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)

谁能帮我解决这个问题？

4

2 回答 2

1

您必须在 next.config.js 文件中为图像配置路径，如下所示，这不是必需的：

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

除非您有第三方图像提供者，否则您不需要配置路径属性，请参阅此处的文档

于 2020-11-10T14:28:47.437 回答
0

如果将图像放在 /public 文件夹的根目录中，它会起作用吗？（而不是 /public/images）

于 2020-11-09T20:57:30.533 回答