I am new to react and trying to get background image with inline styling. But it's not working.
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)}/>
<Link className="button1" to="Form"> + </Link>
</div>
)
}
}
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')" } }>