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

shouldn't it just be "url(/static/images/banner-bg1.jpg) as of: github.com/zeit/next.js/issues/1935 — Luca
– Luca, Commented Apr 3, 2019 at 6:29

Luca · Accepted Answer · 2019-04-03 06:51:15Z

9

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.

answered Apr 3, 2019 at 6:51

Luca

1,8263 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

suther Over a year ago

static don't work anymore. Directory-Name is now public See: github.com/vercel/next.js/blob/master/errors/…

giovannipds Over a year ago

if it's just placed at public, you can just refer it as /your-image.extension

Igor · Accepted Answer · 2020-11-26 15:38:44Z

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

answered Nov 26, 2020 at 15:38

Igor

311 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to load background images from css in React and NextJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related