反应组件中的背景图像

时间:2017-11-06 20:20:45

标签: javascript html css reactjs material-ui

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

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

P.S.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>
        )
    }
}

5 个答案:

答案 0 :(得分:10)

您必须使用相对路径将图像导入如下。

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

答案 1 :(得分:2)

像Romainwn说的那样,你需要将图像导入文件。确保使用父级的相对路径,而不是

static/src/img/main.jpg    #looks for static folder from current file location

/static/src/img/main.jpg #looks for file from host directory:

要做到这一点的另一个方法是在组件中添加内联样式标记:

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


export default class Home extends React.Component{
    render(){
        return(
            <Paper style="background:path/to/your/image;">

            </Paper>
        )
    }
}

答案 2 :(得分: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>
        )
    }
}

答案 3 :(得分:0)

使用Material UI React和Create React App时遇到同样的问题。这是适合我的解决方案。请注意,我为相对路径

设置了webpack别名
import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = {
  backgroundImage: 'url('+ BackgroundHeader+')'
  }

<div style={BackgroundHead}>

答案 4 :(得分:0)

我将其用于Material-ui,其中父元素上的填充为24px,因此我在背景图片的宽度上添加了48px以使其起作用...

const styles = {
   heroContainer: {
     height: 800,
     backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   }
  };
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style={styles.heroContainer} >
    <Grid item>Goes here</Grid>
</Grid>