如何从单独的 jsx 文件中设置标题的背景图像？答案

【问题标题】：How do I set the background image of header from a separate jsx file?如何从单独的 jsx 文件中设置标题的背景图像？
【发布时间】：2019-10-19 12:45:09
【问题描述】：

我无法显示标题的背景图片。

我是否必须提供相对于组件所在位置的文件路径，或者只是将图像导入 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 组件样式的文件。

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
    }
};

标题元素的背景图片应该设置，但不是。没有显示错误。

【问题讨论】：

标签： javascript css reactjs styles jsx

【解决方案1】：

您导出的英雄样式对象还有更多内容吗？我看到你有一个标题键，但我也看到你调用 hero.img 但没有看到 img 的键。

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

从'../pathToYourImageDirectory/backgroundImage'导入背景图像

然后设置背景：url(${backgroundImage});

【讨论】：