反应组件中的背景图像

Question

我正在创建一个页面，我想要一个 material-ui 元素使用 background-image CSS 属性作为背景图像.我当然已经用谷歌搜索过了，也有解决方案，但出于某种原因我看不到那张图片。

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

P.S.2：当我使用内部容器时它会显示，但这不是我想要的。

更新 1：尝试将高度和宽度添加到容器中，仍然没有成功...

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

Answer 1

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

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

Answer 2

我找到了解决方法。实际上以像素为单位设置容器高度很有帮助。

代码如下：

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

Answer 3

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

Answer 4

在使用 Material UI React 和 Create React App 时遇到了同样的问题。这是对我有用的解决方案。注意我为相对路径设置了一个webpack别名

import BackgroundHeader from "assets/img/BlueDiamondBg.png"

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

<div style={BackgroundHead}>

Answer 5

我得到这个用于 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>

反应组件中的背景图像

background-image in react component

html

javascript

css

reactjs

material-ui