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, чего я совсем не хочу ...

Кто-нибудь знает, в чем прикол? Если вам нужна дополнительная информация, дайте мне знать.

      // 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}/>

Img, сгенерированный компонентом <Image />, выглядит так и одинаков для всех моих страниц:

      <img alt="midnight city" 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">

структура проекта

Answer 1

поэтому я, наконец, исправил проблему, добавив '/' перед моим статическим путем к изображению, чтобы он всегда обслуживался из корня

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