title: ReactJS not displaying backgroundImage inline CSS
body: <p>I'm trying to create a component that renders images as "tiles" or "cards" using inline CSS with ReactJS. However, I cannot figure out why the image is not displaying. I'm new to ReactJS, so this might be simply a dependency package I haven't installed - but please advise!</p>
  
  <p>I bootstrapped this project from Create-React-App.</p>
  
  <p>I've checked URL configuration, inline CSS syntax, and inspected the page on my local server, but I can't seem to figure out why the image won't display. I've tried to add "require" around the url, but that didn't seem to work (unless there is a specific way I need to set a url to be required?). I've also tried to use the image tag instead, having  but that displayed the tiny default image icon when the actual image fails to load.</p>
  
  <pre><code>import React from 'react';
  
  function getUrl(name) {
    let string = `./images/${name}.jpg`;
    return string
  }
  
  function HorizontalTile(props) {
  
    let name = props.name;
    let position = props.position;
    let size = props.size;
  
    let url = getUrl(name);
  
    const divstyle = {
      height: "50vh",
      width: "100%",
      backgroundImage: `url(${url})`,
      backgroundPosition: `${position}`,
      backgroundSize: `${size}`,
      backgroundRepeat: "no-repeat",
      WebkitTransition: "all",
      msTransition: "all",
    };
  
    return (
      &lt;div style={divstyle} alt={name}&gt;&lt;/div&gt;
    )
  }
  
  
  export default HorizontalTile
  </code></pre>
  
  <p>I'm calling this component like this, in another JS file within the same directory:
  .
  .
  .</p>
  
  <pre><code>import HorizontalTile from './HorizontalTile';
  .
  .
  .
  &lt;HorizontalTile name="proj-hor-1" position="center" size="cover" /&gt;
  .
  .
  .
  export default Photos
  </code></pre>
  
  <p>The spacing loads fine and all the CSS elements seem to be captured, but the image doesn't appear. Any idea what I can try?</p>