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>

Answer 2

Hello

Everybody after some Research I found a better solution for this question like this

import BannerBgImg1 from "../../assets/static/img/banner/banner_bg_img_1.jpg";

<div className="bannerInnerItem" style={{backgroundImage: `url(${BannerBgImg1})` }}>

is the best way to use this

Answer 3

 const Images = [
    require('./greenbanner.jpg'),
    require('./greengrass.jpeg'),
    require('./opengreen.jpg')   ];

This is for an array of images that should be required
we need to require them when they cannot be loaded

Answer 4

I hope Background Img is very common. So please try to use it. It is very easy to use. At first you should import img and then easily use it in your jxs file.

import InnerBgImg from "../../assets/static/img/banner/inner_banner_bg_static.jpg";
return (
    <div className="inner_banner" style={{ backgroundImage: "url(" + InnerBgImg +")" }}>