反应组件中的背景图像 [英] 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屋!