Backgroundimage is not working in react

Question

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>
       )
    }
 }

wrap it in quotes, you're in JS context when you put curlies in JSX so you're literally trying to call a function called `url` which doesn't exist — ZekeDroid, Aug 05 '16 at 16:43

score 36 · Accepted Answer · answered Aug 05 '16 at 16:55

36

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')" } }>

answered Aug 05 '16 at 16:55

Ross Allen

43,772
14
97
95

@TheViralGriffin Can you open a new question for the issue you're seeing and paste the code you are using? – Ross Allen Sep 18 '18 at 14:54
The issue i was facing was minor mistype. Fixed it, thanks. – TheViralGriffin Sep 19 '18 at 12:23

score 31 · Answer 2 · answered Nov 11 '17 at 12:35

31

Faced a similar problem and this did the trick for me

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

the trick was adding the require

answered Nov 11 '17 at 12:35

λraulain

421
5
6

Thanks. I have to note here that although I tried many things, this here worked. +1 – Constantine Black Sep 20 '19 at 16:18
1

Alternatively, ES6 `import` statement can also be used. – Neeraj Sewani Sep 27 '19 at 06:38

score 16 · Answer 3 · answered Feb 26 '20 at 12:02

16

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.

answered Feb 26 '20 at 12:02

Wachid

447
5
8

It saved my day! thank you! The ` ' " are so confusing – damingzi May 01 '20 at 23:22
' - This quote inside parenthesis was very important. Thanks! – Indranil Dutta Jul 21 '22 at 09:11

Neeraj Sewani · Answer 4 · 2019-09-29T18:44:32.800

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.

your solution set me free from a problem that I got stuck on for 2 days! — mathguy, Apr 17 '21 at 03:18

score 5 · Answer 5 · answered Aug 09 '18 at 12:20

I've stumbled upon this thread today. I was in need to change the backgroundImage property dynamically, so require was not an option. In my ElectronJS app all I did was:

const imageFilePath = './some/dynamic/path/here';
const style = { backgroundImage: `url('file://${imageFilePath}')` };

Hope this helps somebody :)

score 4 · Answer 6 · edited Nov 05 '21 at 06:19

4

I was battling with this same issue this morning but i was able to fix it with below snippet.

<div
    className="col-md-4 col-xs-12"
    style={{
      backgroundImage: `url(${require('./path/img.png')})`,
      backgroundPosition: 'center',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
    }}
></div>

edited Nov 05 '21 at 06:19

sina

2,103
1
19
26

answered May 14 '19 at 15:21

Yusuf Adeyemo

389
3
12

I'm glad it's helps. Cheers! – Yusuf Adeyemo Sep 12 '20 at 17:34

score 4 · Answer 7 · answered Jun 23 '21 at 02:52

4

I'm not sure why, but for me only one way that works is like this:

<div style={{backgroundImage: `url(${require("./images/your_image").default})`}}></div>

Without the .default no error would occur, but the image simply would not appear in the html. I hope I helped someone ;)

answered Jun 23 '21 at 02:52

Saulo Felipe

39
1
3

4

Hi Saulo Felipe. The reason you needed `.default` is because `require()` imports CommonJS modules and your file/image loader (probably a webpack plugin) exposed the image as an ESM style default export. This only applies to images loaded locally, not from external URLs like in this question. it is hopefully still useful for people coming here with that problem. – Moritz Mahringer Jun 23 '21 at 04:54

Backgroundimage is not working in react

7 Answers7

Linked