Как установить фоновое изображение заголовка из отдельного файла jsx?

Question

Не удается отобразить фоновое изображение заголовка.

Нужно ли указывать путь к файлу относительно места расположения компонента или просто импортировать изображение в файл 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
    }
};

Фоновое изображение элемента заголовка должно быть настройкой, но это не так. Там нет ошибок, которые показывают.

Answer 1

Есть ли еще что-то для объекта стиля вашего героя, который вы экспортируете? Я вижу, что у вас там есть ключ header, но я также вижу, что вы вызываете hero.img, но не видите ключ img.

Во-вторых, я вижу, что вы импортируете {images} в ваш стиль компонента. Это указывает на правильный URL? Поскольку вы также можете просто разместить фоновое изображение в каталоге изображений, тогда

импорт backgroundImage из '../pathToYourImageDirectory/backgroundImage'

и затем установите фон: url (${backgroundImage});