如何在 React 和 NextJS 中从 css 加载背景图像

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.

Answer 2

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;
    }
});