How to load background images from css in React and NextJS

Question

The images not loading from CSS file which is used for the background but in jsx it's loading

In the CSS file, I have used like below

.main-banner {
  position: relative;
  height: 910px;
  z-index: 1;
  background: transparent url(../../static/images/banner-bg1.jpg) right top no-repeat;
}

the image URL is absolutely fine

And configuration file like this

//next.config.js
const withImages = require('next-images');
const withCSS = require('@zeit/next-css')

module.exports = withImages(withCSS({
    cssLoaderOptions: {
        url: false
    }
}))

what is the issue actually?

Thanks

Answer 1

Your static files are being deployed to the web's root. Same as your compiled js and css files.

So you can access them with the following url: url(/static/images/banner-bg1.jpg)

More information about that on this github issue.