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)

有人能帮我解决这个问题吗？

Answer 1

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

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

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

Answer 2

如果将图像放在/public文件夹的根目录中，它能工作吗？(代替/public/images(

Answer 3

也尝试指定向后文件夹的名称。假设您的文件来自公用文件夹，然后tr"images/sure_cash_logo.png"；，