javascript - 背景图像没有显示在 JSX 中？

Question

我正在尝试在 JSX 中加载此背景图片，但是在所有尝试之后图片将无法加载。

Row 组件来自 ReactStrap，我使用的是 WebPack。

我试过 backgroundColor 并且颜色呈现得很好。

我已经尝试了引号和模板文字的所有组合。

我试过不使用 <row />组件并简单地在常规 div 上使用样式，仍然没有运气。

我试过内联和变量中的单独对象。

我试过使用 ref.

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

在 Chrome Dev Tools 中，图像看起来已经很好地加载到容器中了。

谁能看出我在这里做错了什么？

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

与分区:

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>
        </>
     )
 }

Answer 1

尝试对图像 src 使用 require('./path-to-image')。

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

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