Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backgroundimage is not working in react

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)}/>
            &nbsp; &nbsp;&nbsp; &nbsp;

            <Link className="button1" to="Form"> + </Link>
        </div>
       )
    }
 }
like image 444
komal deep singh chahal Avatar asked Aug 05 '16 16:08

komal deep singh chahal


People also ask

How to include background image in react?

export default App; Output: Method 5: Add background image from src/ folder If the image resides inside the src directory, the user can import it inside the component filer and set it as the background image. In this file, we will import the image and set it as a background image of the div element.

Why is my CSS background image not working?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

How do you change the background of a dynamic image in react?

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: !


4 Answers

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')" } }>
like image 150
Ross Allen Avatar answered Oct 18 '22 21:10

Ross Allen


Faced a similar problem and this did the trick for me

style={{backgroundImage: 'url(' + require('./images/sword.png') + ')'}}

the trick was adding the require

like image 22
λraulain Avatar answered Oct 18 '22 20:10

λraulain


In my case, i have url with space on it, so it needs to be wrapped with quotes mark ex: 'url', because i got url (imagePath) directly from server.

<div style={{ backgroundImage: `url('${imagePath}')` }} />

Hope this helps someone.

like image 14
Wachid Avatar answered Oct 18 '22 22:10

Wachid


In React putting relative paths for images like this

<div className="container-login100" style={{ backgroundImage: "url('./folder/images/bg-01.jpg')" }}>

doesn't seems to work as it is JSX, you need to import the image or require it

import BackgroundImage from './../frontend_authentication_copied/images/bg-01.jpg'

...

styles = {
        backgroundImage: `url(${BackgroundImage})`
    }

...

<div className="container-login100" style={this.styles}>

Just make sure you put all the images inside the src folder since relative imports are not supported from outside the src folder if create-react-app is used.

like image 9
Neeraj Sewani Avatar answered Oct 18 '22 20:10

Neeraj Sewani