反应组件中的背景图像 [英] background-image in react component

问题描述

我正在构建一个页面，并且我想让material-ui元素具有使用background-image CSS属性的背景图像.我已经用谷歌搜索了它，并且有解决方案，但是由于某种原因我看不到该图像.

I'm building a page and I want a material-ui element to have a background image using background-image CSS property. I have googled for it of course, and there are solutions but for some reason I can't see that image.

P.S.1:即使将MUI元素更改为常规元素也完全没有帮助.

P.S.1: even changing that MUI element to regular hasn't helped me at all.

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

P.S.2: when I'm using inside container it shows, but that's not what I want.

UPDATE1:尝试为容器增加高度和宽度，但还是没有运气...

UPDATE1: Tried adding height and width to container, still no luck...

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

推荐答案

我找到了适合我的情况的解决方案.实际上，以像素为单位设置容器高度很有帮助.

I've found a fix for my case. Actually setting container height in pixels have helped.

代码如下:

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

这篇关于反应组件中的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！