Inline background-image in React

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

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>

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

 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