Javascript 背景图像未显示在ReactJS材质UI中

我似乎无法将我的图像显示为英雄图像。如果我链接到一个像：

url这样的远程点，它就会工作(https://source.unsplash.com/random)

但是，当我切换到导入图像时，除了背景色，我什么也得不到。我不确定哪里出了问题，我对使用材质ui主题和JS的CSS还不熟悉。代码编译得很好，我只是得到一个灰色背景。控制台日志返回“/static/media/stringbean.b584e82e.jpg”

从“React”导入React；
从“../../../img/stringbean.jpg”导入图像；
//梅
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Link”导入链接；
console.log（英雄法师）；
const useStyles=makeStyles（（主题）=>({
主要特点邮政编码：{
职位：“相对”，
背景色：主题。调色板。灰色[800]，
颜色：theme.palette.common.white，
marginBottom：主题。间距（4），
marginTop:theme.space（-3），
背景图片：英雄法师，
背景尺寸：“封面”，
背景重复：“不重复”，
背景位置：“中心”，
},
覆盖：{
位置：“绝对”，
排名：0，
底部：0，
右:0,，
左:0,，
背景色：“rgba（0,0,0,3）”，
},
主要功能PostContent：{
职位：“相对”，
填充：主题。间距（3），
[主题.breakpoints.up（“md”）]：{
填充：主题。间距（6），
paddingRight:0，
},
},
}));
导出默认函数Hero（）{
const classes=useStyles（）；
返回(
{/*增加英雄背景图像的优先级*/}
{}
A9营养
物品描述
{/* 
链接到什么东西？
*/}
);
}

不确定是什么阻止图像加载

我在修改这个

文件夹布局：

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) => ({
  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 (
    <Paper
      className={classes.mainFeaturedPost}
      style={{ backgroundImage: HeroImage }}
    >
      {/* Increase the priority of the hero background image */}
      {<img style={{ display: "none" }} src={HeroImage} alt="TBD" />}
      <div className={classes.overlay} />
      <Grid container>
        <Grid item md={6}>
          <div className={classes.mainFeaturedPostContent}>
            <Typography
              component="h1"
              variant="h3"
              color="inherit"
              gutterBottom
            >
              A9 Nutrition
            </Typography>
            <Typography variant="h5" color="inherit" paragraph>
              Description of stuff
            </Typography>
            {/* <Link variant="subtitle1" href="#">
              Link to something?
            </Link> */}
          </div>
        </Grid>
      </Grid>
    </Paper>
  );
}