Adding background image in React JS

Question

I decided to use inline JS styles in React. Everything is ok except images. Here I try to add a background image to div but I get errors.

import React, {Component} from 'react';
import ReactDOM from "react-dom";

var styles = {
color:'violet',
backgroundImage: 'url(' + require('./sun.png') + ')' 
};

class App extends React.Component {
  render() {
    return (
    <div>
        <h1>How to make smth</h1>
        <div style={styles}>test</div>
    </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

I get errors, and I just dont know what loader do i need and how to add it to the webpack config (or package.json)

here is what i get

palsrealm · Accepted Answer · 2017-10-09 17:46:23Z

6

Try

import React, {Component} from 'react';
import ReactDOM from "react-dom";
import image from './sun.png';

var styles = {
color:'violet',
backgroundImage: 'url('+image+')'
};

Adding loaders: In the webpack config you are using change

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]

to

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      },
      {
        test: /\.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
      }
    ]

edited Oct 9, 2017 at 17:46

answered Oct 9, 2017 at 17:16

palsrealm

5,2531 gold badge22 silver badges25 bronze badges

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

8 Comments

kilogram Over a year ago

It is looking like a nice solution.I tried but the same error: Module parse failed. .... You may need an appropriate loader to handle this file type. Same error as before

palsrealm Over a year ago

what is the bundler that you are using? Are you using create-react-app? or are you manually configuring the bundler?

kilogram Over a year ago

I dont use create-react-app here. I use a custom config that I found on codeacademy and modified it little bit github.com/mapledrive/config.git

kilogram Over a year ago

I tried but the same error. I still need an appropriate loader

Jared Goguen Over a year ago

try url-loader with {test: /\.(jpg|png|svg)$/, loader: 'url-loader'}

|

Collectives™ on Stack Overflow

Adding background image in React JS

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related