Why SVG is not rendered in NEXTJS project after deploying on vercel

Question

I had created a showcase single page nextJS application styled with Tailwind CSS. I am adding the background of a component SectionWrapper as an svg file.

I had created a custom class in global.css using @layer utility like this

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

And using them in my index.js like this where I'm passing banner as props.

.
.
.
<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"
      />
.
.
.

And in sectionWrapper component, it is used as ${banner} in the first div.

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;

ISsue

The SVGs are working fine in the local environment. But on the deployed environment of Vercel and Netlify , the SVG is not rendering. It is working fine in localhost but not in production.

in local env

on vercel/netlify

More resources

Github link here

Vercel link/Live Demo here

Answer 1

Moving the SVGs to the public folder and updating thier path in tailwind.config.js to this

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

works for me.