为什么在vercel上部署后，为什么在NextJS项目中没有呈现SVG

Question

我创建了一个带有尾风CSS样式的Showcase Single Page 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中使用它们。 m通过横幅作为道具。

.
.
.
<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不是渲染的。它在Local主机上工作良好，但在生产中效果不佳。

在本地env

中/edz4g.jpg“ alt =“ local ” href =“ https://i.sstatic.net/al6gu.png” rel =“ nofollow noreferrer”>

更多资源

github链接在这里

vercel link/live demo 在这里

Answer 1

将svgs移至public文件夹，并在tailwind.config.js中更新THIER路径到

@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;
  }
  .
  .
}

我对我有效。