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

您的英雄风格对象中还有更多导出内容吗？我看到您在那里有一个标头密钥，但我也看到您在调用hero.img，但没有看到img密钥。

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

从'../pathToYourImageDirectory/backgroundImage'导入backgroundImage

，然后设置背景：url（${backgroundImage}）;

如何从单独的jsx文件设置标头的背景图片？

1 个答案: