React inline styling

Question

How to apply inline styling in order to have a background-image ? the following code doesn't work

Header = React.createClass({
    render(){
    let headerStyle = {
        backgroundImage : url('about.jpg')
    };

    return (<header className="intro-header" style={headerStyle}>
    <div className="container">Some text</div></header>);

    }})

it returns an error :

Uncaught ReferenceError: url is not defined

Answer 1

Inline style are like this;

let headerStyle = {
        backgroundImage : "url('about.jpg')"
    };

Answer 2

You need to pass a string value:

backgroundImage: "url('about.jpg')"

just like you'd do with the standard DOM CSS API. You don't want url('about.jpg') to be interpreted as JS.