1

The image URL in my project before the production build is working fine in VITE server environment, but after production build it isn't showing the correct path of the image in HTML. Other images are working fine except this one which is the only background image in the whole project.

Before Production

<body class="bg-[#333] overflow-x-hidden">
    <header class="bg-[url('img/heroBg.jpg')] bg-cover bg-center before:content-[''] before:absolute before:top-0 before:left-0 before:w-screen before:h-[525px] before:bg-black before:z-10 before:opacity-70 w-screen h-[500px]">

After Running Production Build

        <body class="bg-[#333] overflow-x-hidden">
            <header
                class="bg-[url('../img/heroBg.jpg')] bg-cover bg-center before:content-[''] before:absolute before:top-0 before:left-0 before:w-screen before:h-[525px] before:bg-black before:z-10 before:opacity-70 w-screen h-[500px]"
            ></header>
        </body>
    </header>
</body>

I also tried to use custom theme but it is also not working. My folder hierarchy is like this:

Img 

    /heroBg.jpg

Index.html

node_modules

package.json

package-lock.json

postcss.config

script.js

style.css

tailwind.config

I will be grateful of anyone helping me!

Posandu
  • 525
  • 6
  • 18
Muhammad Kaleem Raza
  • 23
  • 6

1 Answers1

0

Rather than extending your styles inline it may be worth doing so through the tailwind.config file like so:

      // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: {
         'hero-pattern': "url('./assets/hero-pattern.svg')",
         'footer-texture': "url('./assets/footer-texture.png')",
        }
      }
    }
  }

More information on adding and extending tailwind background classes can be found here

5henanigans
  • 59
  • 1
  • 6
  • I've done that already but it seems to not working, After production build there is dist folder with HTML file and assets folder with all the images and styles and script file. Even after putting the correct path according to dist folder nothing seems to work. The hierarchy of dist folder is like this: dist > index.html, assets > img – Muhammad Kaleem Raza Feb 22 '22 at 12:40