1

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.

  1. I'm using the Vite buildtool, React and TailwindCSS.
  2. The image path is ./public/images/bg-mobile.svg
  3. 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 class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

Link to the hosted site

Link to the Github repo

badmood111
  • 61
  • 5
  • 2
    Delete dot before '/images/bg-desktop.svg' and second path. it works for me. – Lukas Jan 15 '23 at 16:44
  • @Lukas I feel like an idiot for writing such a long post when the problem is literally one character long.. Anyways, thank you Lukas, it works – badmood111 Jan 15 '23 at 16:55

2 Answers2

1

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')"
},
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0
backgroundImage: {
  "desktop": "url('/images/bg-desktop.svg')",
  "mobile": "url('/images/bg-mobile.svg')"
},
badmood111
  • 61
  • 5