Home » Reactjs » Setting a backgroundImage With React Inline Styles

Setting a backgroundImage With React Inline Styles

Posted by: admin November 30, 2017 Leave a comment

Questions:

I’m trying to access a static image to use within an inline backgroundImage property within React. Unfortunately, I’ve run up dry on how to do this.

Generally, I thought you just did as follows:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

This works for <img> tags. Can someone explain the difference between the the two?

Example:

<img src={ Background } /> works just fine.

Thank you!

Answers:

The curly braces inside backgroundImage property are wrong.

Probably you are using webpack along with image files loader, so Background should be already a String:
backgroundImage: "url(" + Background + ")"

You can also use ES6 string templates as below to achieve the same effect:

backgroundImage: `url(${Background})`

Leave a Reply

Your email address will not be published. Required fields are marked *