Javascript 如何从单独的jsx文件中设置头的背景图像？

我无法显示标题的背景图像

我必须给出相对于组件所在位置的文件路径，还是只在jsx文件中导入图像并在那里设置url？我两个都试过了，但我可能做错了。有什么建议吗

这是我试图为其设置标题背景图像的组件

import React, { Component } from 'react';
import { Typography, Button } from '@material-ui/core';
import { header, images } from '../../datamodel/configItems/ComponentRenderableData';
import medicine from '../../assets/images/medicine.png';
import { hero } from '../../assets/jsx/appStyle';

class Hero extends Component {
    render() {
        return (
            <header className={hero.header}>    
                <Typography>{header.header}</Typography>
                <Typography>{header.paragraph}</Typography>
                <Button>{header.btn}</Button>
                <img className={hero.img} src={medicine} alt={images.medicine.alt} />
            </header>
        );
    }
}

export default Hero;

---

应设置标题元素的背景图像，但未设置。没有显示错误。

导出的英雄样式对象还有其他错误吗？我看到你在那里有一个标题键，但我也看到你在呼叫hero.img，但没有看到img键

第二件事，我看到您将{images}导入到组件样式中。它是否指向正确的url？因为你也可以把你的背景图片放在你的图片目录里

从“../pathToYourImageDirectory/backgroundImage”导入backgroundImage

然后设置背景：url（

${backgroundImage}

）

import { images } from '../../datamodel/configItems/ComponentRenderableData';

export const hero = {
    header: {
        backgroundImage: `url(${images.blob_path.img})`,
        backgroundSize: "contain, cover",
        backgroundRepeat: "no-repeat",
        height: "90vh",
        width: "100%",
        backgroundPosition: "top left",
        overflow: "hidden"
    },
    img: {
        ... more styling
    }
};