我正在构建一个页面,我希望一个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>
)
}
}
答案 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>