TailwindCSS - background image not loading on build-CodePudding

I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.

The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.

I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.

If anyone knows what I'm doing wrong, I'd be really happy to know.

//tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "huddle-violet": "hsl(257, 40%, 49%)",
        "huddle-magenta": "hsl(300, 69%, 71%)",
      },
      backgroundImage: {
        "desktop": "url('./images/bg-desktop.svg')",
        "mobile": "url('./images/bg-mobile.svg')"
      },
    },
  },
  plugins: [require('prettier-plugin-tailwindcss')],
};

//index.html
<body >
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

Link to the hosted site

Link to the Github repo

CodePudding user response：

backgroundImage: {
  "desktop": "url('/images/bg-desktop.svg')",
  "mobile": "url('/images/bg-mobile.svg')"
},

CodePudding user response：

The relative path being used is wrong.

./ with this you mean one heirarchy up.

But according to your question ./public/images/bg-mobile.svg

So try replacing ./ with / it should work.

Final code:

backgroundImage: {
  "desktop": "url('/images/bg-desktop.svg')",
  "mobile": "url('/images/bg-mobile.svg')"
},