ReactJS change background image dynamically?
You haven't specified when would you like to change backgroundImage
, so I've created version which changes it with onClick
:
React.createClass({ getInitialState: function () { nextImg: false, }, handleClick: function () { this.setState({ nextImg: !this.state.nextImg }) }, render: function() { var imgUrl = this.state.nextImg ? this.state.nextImgSrc : this.state.song.imgSrc; var divStyle = { backgroundImage: 'url(' + imgUrl + ')' } return ( <li> <div ref="image-pane" style={divStyle} onClick={this.handleClick} className="player"></div> </li> ) }});
Notice that backgroundImage: 'url(' + imgUrl + ')'
no longer must have trailing semicolon, in fact the trailing semicolon will cause React to raise and error.