komal deep singh chahal komal deep singh chahal - 1 year ago 235
CSS Question

background image is not working in react

i am new to react and trying to get background image but its not working anymore.
showing error "url is not defined"

render() {

return (

<div className="phase1" style ={ { backgroundImage: url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300') } }>

<input id="search" type="text" placeholder={this.state.search} onChange={this.updateSearch.bind(this)}/>
&nbsp; &nbsp;&nbsp; &nbsp;
<Link className="button1" to="Form"> + </Link>


please help me with it.. thanks

Answer Source

CSS values are always strings. Wrap the backgroundImage value in quotation marks to make it a string:

<div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download