NEXTJS - 公共图像未显示在动态路线上

Question

我在从 public/images 文件夹提供静态图像时遇到问题。

它正确显示在我迄今为止正在处理的文件中，除了动态文件 [itemId].js （如下图所示）

我得到的最有趣的线索是控制台中的这个错误。

http://localhost:3000/items/_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 404 (Not Found)

它尝试从 /items 提供服务，这根本不是我想要的......

有谁知道这背后的诡计是什么？如果您需要更多信息，请告诉我。

http://localhost:3000/items/_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 404 (Not Found)

由 <Image /> 组件生成的 img 如下所示，并且在我的所有页面上都是相同的：

// in components/Header.js (which is wrapping all of my pages)
import bannerBig from "../public/images/banner-big.png";

// then i use it this way with the Image component from next/image
 <Image src={bannerBig} alt="midnight city" width={1920} height={800}/>

Answer 1

所以我最终通过在静态图像路径之前添加“/”解决了这个问题，这样它总是从根目录提供服务

<Image 
    src={"/" + bannerBig.src}
    alt="midnight city"
    width={bannerBig.width}
    height={bannerBig.height}
/>