反应组件中的背景图像

Question

我正在构建一个页面，并且我希望 material-ui 元素具有使用 background-image CSS 属性的背景图像。我当然搜索过它，并且有解决方案，但由于某种原因我看不到该图像。

PS1：即使将 MUI 元素更改为常规元素也对我没有任何帮助。

PS2：当我在容器内使用时它会显示，但这不是我想要的。

UPDATE1：尝试向容器添加高度和宽度，仍然没有运气……

 import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

const styles = {
    paperContainer: {
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>

            </Paper>
        )
    }
}

原文由 Roman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已经为我的情况找到了解决办法。实际上以像素为单位设置容器高度有帮助。

这是代码：

 import React from 'react';

const styles = {
    paperContainer: {
        height: 1356,
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div style={styles.paperContainer}>
            </div>
        )
    }
}

原文由 Roman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您必须使用相对路径按以下方式导入图像。

 import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path

const styles = {
    paperContainer: {
        backgroundImage: `url(${Image})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>
                Some text to fill the Paper Component
            </Paper>
        )
    }
}

原文由 Romain Le Qllc 发布，翻译遵循 CC BY-SA 3.0 许可协议