Inline background-image in React

Question

I am trying to set a background image via inline styles in React.

After looking through a few posts this one's solution worked for me:

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

I pasted that directly into my component without changing the link just to test it, and it worked. But now that I am trying to reference an image from my /src folder it isn't working.

<div className='background-image' style ={ { backgroundImage: "url('../../../../images/products/cards/main.jpg')" } }>asdfasdfasdfasdf</div>

Nothing shows up and I am not getting any error or warning.

Any help would be really appreciated!

Answer 1

I figured it out, you can't just put a link straight into url. You need to require it first.

var bg=require('../../../../images/products/cards/main.jpg')
return (      
  <div className="ProductItem">

      {/* Background Image */}
      <div className='background-image' style ={ { backgroundImage: "url("+bg+")" } }></div>