javascript – 反应组件中的背景图像

我正在构建一个页面,我想要一个material-ui元素,使用background-image CSS属性来获得背景图像.我当然用google搜索了,并且有解决方案但由于某种原因我看不到那个图像.

P.S.1：即使将MUI元素改为常规也根本没有帮助我.

P.2.2：当我在内部使用容器时,它会显示,但那不是我想要的.

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

解决方法:

您必须使用相对路径导入图像,如下所示.

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

标签：javascript,css,reactjs,material-ui,html
来源： https://codeday.me/bug/20190716/1474229.html