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

Posted 2023-03-30

【中文标题】NEXTJS - 公共图像未显示在动态路线上

【英文标题】：NEXTJS - public images not showing on dynamic routes

【发布时间】：2021-09-20 11:21:16

【问题描述】：

我在从我的 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 提供服务，这根本不是我想要的......

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

// 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  width=1920 height=800/>

组件生成的 img 看起来像这样，并且在我的所有页面中都是相同的：

<img  src="_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&amp;fit=max&amp;w=3840" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&amp;fit=max&amp;w=1920 1x, _next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&amp;fit=max&amp;w=3840 2x">

【参考方案1】：

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

<Image 
    src="/" + bannerBig.src
    
    width=bannerBig.width
    height=bannerBig.height
/>