Next Js，为什么小猫不加载

Question

正如在 Next Js 文档中描述的那样，我添加了一个 next.config.js 文件来告诉 Next js 我想将小猫加载到我的应用程序中。

这是资源：

https://placekitten.com/640/360

next.config.js 看起来像这样：

module.exports = {
  images: {
    domains: ["placekitten.com"],
  },
};

在我的组件中它看起来像这样：

import Link from "next/link";
import Image from "next/image";
export default function SidebarItem({
  categories = [
    "Get the Look",
    "Clothing",
    "Shoes",
    "Sports",
  ],
}) {
  return (
    <section className='flex'>
      <Image
        alt='Picture of the author'
        width={300}
        height={300}
        src='/640/360'
      />
    </section>
  );
}

我收到此错误： image:1 GET http://localhost:3000/_next/image?url=%2F640%2F360&w=640&q=75 400（错误请求）

我做错了什么？

Answer 1

您忘记设置图片的完整路径：

<Image
   alt='Picture of the author'
   width={300}
   height={300}
   src='https://placekitten.com/640/360'
/>