React & Webpack: Loading and displaying images as background-image

Question

I\'m creating a banner-like component with image set as a component\'s background but I can\'t get it to work. I tried different suggestions posted online to no luck and at

Answer 1

You should pass a var that is the result of requiring the image, when you require it using webpack, it'll generate a base64 inline image, not a relative path.

var DuckImage = require('./Duck.jpg');

var bannerStyle = {
    backgroundImage: 'url(' + DuckImage + ')',
    backgroundSize: this.props.image.backgroundSize,
    backgroundPosition: this.props.image.backgroundPosition,
}