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',\]
        },
       \]
    },

}

So what does your dev tools say? Specifically, does the console show any errors, and does the network tab show any 404 results? — Mike 'Pomax' Kamermans, Jun 24 '19 at 00:23
I tried to load a image from local folder, so there is no 404 error here. In the dev tools, the browser can not run css "background-image" — Nguyen Ngoc Hai, Jun 24 '19 at 00:26
That seems pretty obvious then? Look at the URL that's a 404, and fix whatever is wrong with the path by changing whatever line of code is loading that obviously wrong URL (whether that's CSS or JS) so that it loads the _correct_ URL? (also, do _not_ load images in CSS as base64, let the browser cache images the way it was meant to. Just put the image in a static assets directory, and then point to that in your CSS. Don't create _massive_ css files, that's just making life miserable for your users) — Mike 'Pomax' Kamermans, Jun 24 '19 at 00:27
I don't have 404 error at the URL, and I make sure that my URL is correct in my code. how I can fix web-pack config file? — Nguyen Ngoc Hai, Jun 24 '19 at 00:39
Sorry, I misread you. If there is no 404, but things don't work, then what does the console say? (And remember to turn off any filtering, you want to see _all_ errors, warnings, etc) — Mike 'Pomax' Kamermans, Jun 24 '19 at 00:42
There is no error in my console, everything works fine, and my browsers realize my css file, expected the line "background-image: url(/src/app/assets/icons/shape.b55405126e3e1a1fe3c2905471f1401d.jpg) no-repeat center;" — Nguyen Ngoc Hai, Jun 24 '19 at 00:58
So when you type `yoourdomain/src/app/assets/icons/shape.b55405126e3e1a1fe3c2905471f1401d.jpg` in your URL bar, that works fine? Because if it does, your CSS rule should work just fine, but if you CSS rule doesn't kick in, I find it hard to believe that URL actually works rather than being a 404. — Mike 'Pomax' Kamermans, Jun 24 '19 at 01:08

score 1 · Answer 1 · answered Jun 24 '19 at 07:52

1

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

answered Jun 24 '19 at 07:52

sanjay

11
2

It would be better to write like this: "you should use" instead of "you can use" – Arseniy-II Jun 24 '19 at 08:11

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

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
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 24 '19 at 08:18

Arseniy-II

8,323
5
24
49

Why my Webpack does not loading background image?

2 Answers2

You have made mistake in css rule

How to fix