Why my Webpack does not loading background image?

Question

I'm fairly new to webpack but having some problems with css-loader or file-loader in react

I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style.

I'm trying to load this background image via css file in React: background: url('../../assets/img/1017.jpg') no-repeat right;

here is my web pack config:

[![const path = require("path");

module.exports =
{
    mode: "development",
    entry: path.resolve(__dirname,`src`, `app`),
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath:'/'
    },
    resolve: {
        extensions: \['.js','.jsx'\]
    },
    devServer:{
        historyApiFallback: true
    },
    module: {
        rules:\[{
            test: /\.jsx?/,
            loader:'babel-loader',
            exclude: '/node_modules'
        },
        {
            test: /\.(jpg|png)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 25000,
              },
            },
          },

          {
            test: /\.(jpg|png)$/,
            use: {
              loader: "file-loader",
              options: {
                name: "\[path\]\[name\].\[hash\].\[ext\]",
              },
            },
          },
        {
            test:/\.css$/,
            use:\['style-loader','css-loader',\]
        },
       \]
    },

}

Answer 1

You have made mistake in css rule

You have used background-image with no-repeat and center. background-image accepts only url(...). Read more here

How to fix

Just replace background-image with background

.loginLeft{
    background: url(data:image/...) no-repeat center
}

Answer 2

you have added no-repeat and center value in background-image property, instead you can use background property.