title: Background Images not displaying in ReactJS material UI
body: <p>I can't seem to get my image to display as a hero image.  it works if I link to a remote point like: <code>url(https://source.unsplash.com/random)</code></p>
  
  <p>but when I switch it to an import of an image I get nothing but the background color.  Not sure where I've gone wrong, I am new to using material ui theme and the CSS with JS.   The code compiles fine I just get a grey background.  the console log returns "/static/media/string-bean.b584e82e.jpg"</p>
  
  <pre><code>import React from "react";
  import HeroImage from "../../../img/string-bean.jpg";
  
  // Mui
  import { makeStyles } from "@material-ui/core/styles";
  import Paper from "@material-ui/core/Paper";
  import Typography from "@material-ui/core/Typography";
  import Grid from "@material-ui/core/Grid";
  import Link from "@material-ui/core/Link";
  
  console.log(HeroImage);
  
  const useStyles = makeStyles((theme) =&gt; ({
    mainFeaturedPost: {
      position: "relative",
      backgroundColor: theme.palette.grey[800],
      color: theme.palette.common.white,
      marginBottom: theme.spacing(4),
      marginTop: theme.spacing(-3),
      backgroundImage: HeroImage,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
    },
    overlay: {
      position: "absolute",
      top: 0,
      bottom: 0,
      right: 0,
      left: 0,
      backgroundColor: "rgba(0,0,0,.3)",
    },
    mainFeaturedPostContent: {
      position: "relative",
      padding: theme.spacing(3),
      [theme.breakpoints.up("md")]: {
        padding: theme.spacing(6),
        paddingRight: 0,
      },
    },
  }));
  
  export default function Hero() {
    const classes = useStyles();
  
    return (
      &lt;Paper
        className={classes.mainFeaturedPost}
        style={{ backgroundImage: HeroImage }}
      &gt;
        {/* Increase the priority of the hero background image */}
        {&lt;img style={{ display: "none" }} src={HeroImage} alt="TBD" /&gt;}
        &lt;div className={classes.overlay} /&gt;
        &lt;Grid container&gt;
          &lt;Grid item md={6}&gt;
            &lt;div className={classes.mainFeaturedPostContent}&gt;
              &lt;Typography
                component="h1"
                variant="h3"
                color="inherit"
                gutterBottom
              &gt;
                A9 Nutrition
              &lt;/Typography&gt;
              &lt;Typography variant="h5" color="inherit" paragraph&gt;
                Description of stuff
              &lt;/Typography&gt;
              {/* &lt;Link variant="subtitle1" href="#"&gt;
                Link to something?
              &lt;/Link&gt; */}
            &lt;/div&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Paper&gt;
    );
  }
  </code></pre>
  
  <p>Not sure what is preventing the image from loading.</p>
  
  <p>I was modifying this <a href="https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/blog" rel="nofollow noreferrer">blog template</a></p>
  
  <p>Folder layout:</p>
  
  <p><a href="https://i.stack.imgur.com/oGCbc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oGCbc.png" alt="Folder layout"></a></p>