CODEWITHSUNDEEP
cssreactjsnext.js
jesica
jesica

Reputation: 685

How to load background images from css in React and NextJS

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

Upvotes: 9

Views: 15448

Answers (2)

Igor
Igor

Reputation: 31

I recieved [object Module] in css prop background-image. flag esModule: false in url-loader options fixed that problem.

const withCSS = require('@zeit/next-css');
const nextConfig = withCSS({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    esModule: false,
                    name: '[name].[ext]'
                }
            }
        });
        return config;
    }
});

Upvotes: 2

Luca
Luca

Reputation: 1826

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.

Upvotes: 9

Related Questions