Correct way to set background image URL in React JSX object

Question

I would like to set the background image in my style JS object. For some reason the following is not working, no image appears and no errors?

React

const homeStyle = {
    width: '100%',
    height: '100vh',
    backgroundImage: 'url("../../assets/images/home.png")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    paddingTop: '160px',
    paddingLeft: '400px'
  };

 <div style={homeStyle}></div>

Any idea's?

Answer 1

try to import the image with

import Background from '../../assets/images/home.png';

and replace the backgroundImage property with

backgroundImage: `url(${Background})`,