為什么 SVG 在 Vercel 上部署后沒有在 NEXTJS 項目中呈現

Question

我創建了一個使用 Tailwind CSS 樣式的展示單頁 nextJS 應用程序。 我將組件SectionWrapper的背景添加為svg文件。

我在global.css中創建了一個自定義類，使用像這樣的@layer實用程序

@layer components {
  .banner {
    @apply bg-[url('../assets/banner.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
  }

  .banner02 {
    @apply bg-[url('../assets/banner02.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
  }
  .
  .
}

並像這樣在我的index.js中使用它們，我將banner作為道具傳遞。

.
.
.
<Sectionwrapper
        title="Creative way to showcase the store"
        description="The app contains two screens. The first screen list all NFTs while the second shows the details of a specific NFT."
        mockupImg={assets.mockup.src}
        banner="banner02"
      />
.
.
.

而在sectionWrapper組件中，它在第一個 div 中用作${banner} 。

import React from "react";
import assets from "../assets";
import Button from "./Button";

const Sectionwrapper = ({
  title,
  description,
  showBtn,
  banner,
  mockupImg,
  reverse,
}) => {
  return (
    <div
      className={`min-h-screen flex justify-center items-center p-16 sm:p-8 ${banner} ${
        reverse ? "bg-white" : "bg-primary"
      }`}
    >
      <div
        className={`flex items-center w-11/12 sm:w-full minmd:w-3/4 ${
          reverse
            ? "flex-row-reverse md:flex-col-reverse fadeRightMini"
            : "flex-row md:flex-col fadeLeftMini"
        } `}
      >
        .
        .
        .
        </div>
      </div>
    </div>
  );
};

export default Sectionwrapper;

問題

SVG 在本地環境中運行良好。 但是在Vercel和Netlify的部署環境中，SVG 沒有渲染。 它在本地主機中運行良好，但在生產中卻不行。

在本地環境中

在 Vercel/netlify 上

更多資源

Github鏈接在這里

Vercel 鏈接/現場演示在這里

Answer 1

將 SVG 移動到public文件夾並將tailwind.config.js中的路徑更新為此

@layer components {
  .banner {
    @apply bg-[url('/banner.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
  }

  .banner02 {
    @apply bg-[url('/banner02.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
  }
  .
  .
}

為我工作。