Javascript 背景图片未在JSX中显示？

我试图在JSX中加载这个背景图像，但是，在所有尝试之后，图像都不会加载

行组件来自ReactStrap，我正在使用WebPack

我试过背景色，颜色渲染得很好

我尝试了引号和模板文本的所有组合

我试过不使用

组件，只在常规div上使用样式，但仍然没有成功

我尝试了内联和在变量中的单独对象中

我试过使用ref

png图像与js文件位于同一文件夹中

在Chrome开发工具中，图像看起来像是加载到容器中

有人知道我做错了什么吗

<Row style={{ backgroundImage: `url('./leigh.png')` }} key={props.id} className={postCardWithBG}>
</Row>

与Div一起：

className=“div”正好用于指定div的宽度和高度

<div className="div" style={{ backgroundImage: `url('./leigh.png')` }}></div>
</div>

更完整的代码示例：

import React from "react"
import PropTypes from "prop-types"
import '../scss/base.scss'
import { Link } from "gatsby"
import { CardTitle, CardText, Row, Col } from "reactstrap"
import Moment from "react-moment"
import UserBar from './UserBar/UserBar'
import ThumbUp from '@material-ui/icons/ThumbUp';
import AddCircle from '@material-ui/icons/AddCircle';
import Place from '@material-ui/icons/Place'

const PostCard = props => {

    let Background = './leigh.png'

    return (
        <>
          <div className="div" style={{ backgroundImage: `url('./leigh.png')` }}></div>
            <Row style={{ backgroundImage: `url('./leigh.png')` }} key={props.id} className={postCardWithBG}>
            </Row>
          </div>
        </>
     )
 }

从“React”导入React
从“道具类型”导入道具类型
导入“../scss/base.scss”
从“盖茨比”导入{Link}
从“reactstrap”导入{CardTitle，CardText，Row，Col}
从“反应力矩”导入力矩
从“./UserBar/UserBar”导入用户栏
从“@material ui/icons/ThumbUp”导入缩略图；
从“@material ui/icons/AddCircle”导入AddCircle；
从“@material ui/icons/Place”导入位置
康斯特明信片=道具=>{
让背景=“./leigh.png”
返回(
)
}

尝试对图像src使用require（'./path to image'）

const background = require('./leigh.png');

<div className="div" style={{ backgroundImage: `url(${background})` }}></div>

const background=require（'./leigh.png'）；

我可以吻你。非常感谢。