为什么 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;
  }
  .
  .
}

为我工作。