React app fails compile when using image url in CSS

Question

I am trying to add a background image to a control in a ReactJS project, using css and it's url functionality.

.jumbotron {
    background-image: url(../images/image.jpeg); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: 6b6b6b;
}

However, a loader is breaking, as it's trying to parse the binary file. An unexpected char. Removing the background line, and all works.

I am using webpack, and my modules are loaded like this:

module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                rules: [
                  {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                  }
                ]
              }
        ]
    }

How can I get my react app to work with this css image as a background url? Creating the project with create-react-app - it works, but I can't see how it's handling the images.

I have a repo: https://github.com/CraigInBrisbane/ReactLearning

Any assistance would be great.

Shouldn't that be url("../images/image.jpeg")? Note the quotation marks. — Leandro
– Leandro, Commented Dec 10, 2017 at 22:37
I can try that, but it worked that way (without quotes) when I created the project using create-react-app. Now, creating a project structure manually, creating my own webpack.config etc... and pulling in the modules I think I need - fails. Same css. — Craig
– Craig, Commented Dec 10, 2017 at 22:43

Slawa Eremin · Accepted Answer · 2017-12-11 01:34:10Z

2

When you use css-loader, webpack removes all your background-image: url(../images/image.jpeg); and inserts require(../images/image.jpeg). There is two way to solve this problem:

1) add file-loader/url-loader for these types of files

2) use absolute path instead of relative ( background-image: url(/images/image.jpeg); ) and css-loader will skip this image

answered Dec 11, 2017 at 1:34

Slawa Eremin

5,42521 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

React app fails compile when using image url in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related