komal deep singh chahal komal deep singh chahal - 1 year ago 205
React JSX Question

Backgroundimage 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"
&nbsp; &nbsp;&nbsp; &nbsp;
<Link className="button1" to="Form"> + </Link>


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