nextjs 图片的网址无效

Question

我正在用 nextjs 编写我的应用程序的前端

我正在尝试从公用文件夹加载图像，但我收到无效的 url

我将图像复制到名为 close.png 的公共文件夹中

我尝试使用以下代码访问图像

 import Image from "next/image";

const Nav = () => {
  return (
    <div className="__nav">
      <Image src="/close.png" width={50} height={50} alt="logo" />
    </div>
  );
};

export default Nav;

我的网址无效。

错误信息

Error occurred prerendering page "/Components/NoAuthArea/Nav". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError [ERR_INVALID_URL]: Invalid URL: /close.png
    at onParseError (internal/url.js:279:9)
    at parse (<anonymous>)
    at new URL (internal/url.js:355:5)
    at imgixLoader (C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:516:17)
    at defaultImageLoader (C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:234:16)
    at C:\Users\OSHABZ\Documents\My jobs\findahouse\.next\server\chunks\675.js:203:39

关闭图片

我该如何解决这个问题

Answer 1

尝试使用 nextjs 图像。 https://nextjs.org/docs/api-reference/next/image

例子：

import Image from "next/image"

<Image src="/close.png" width={200} height={200} />