Javascript 反应组件中的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47145075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
background-image in react component
提问by Roman
I'm building a page and I want a material-ui element to have a background image using background-imageCSS property. I have googled for it of course, and there are solutions but for some reason I can't see that image.
我正在构建一个页面，并且我想要一个 material-ui 元素使用background-imageCSS 属性具有背景图像。我当然已经用谷歌搜索过，并且有解决方案，但由于某种原因我看不到该图像。
P.S.1: even changing that MUI element to regular hasn't helped me at all.
PS1：即使将 MUI 元素更改为常规元素也根本没有帮助我。
P.S.2: when I'm using inside container it shows, but that's not what I want.
PS2：当我在容器内使用时，它会显示，但这不是我想要的。
UPDATE1: Tried adding height and width to container, still no luck...
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>
)
}
}
采纳答案by Roman
I've found a fix for my case. Actually setting container height in pixels have helped.
我已经找到了解决我的情况的方法。实际上以像素为单位设置容器高度有帮助。
Here's the code:
这是代码：
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>
)
}
}
回答by Romain Le Qllc
You have to import the image as the following, using the relative path.
您必须使用相对路径按如下方式导入图像。
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>
)
}
}
回答by Eugene R. Wang
Like Romainwn said, you need to import the image to the file. Make sure you use the relative path to parent, so instead of
就像 Romainwn 说的，您需要将图像导入到文件中。确保您使用父级的相对路径，而不是
static/src/img/main.jpg #looks for static folder from current file location
Do
做
/static/src/img/main.jpg #looks for file from host directory:
Another hack to do it would be adding an inline style tag to the component:
另一个技巧是向组件添加内联样式标签：
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>
)
}
}
回答by Meir Snyder
Had the same issues while working with Material UI React and the Create React App. Here is the solution that worked for me. Note that I set up a webpack alias for the relative path
在使用 Material UI React 和 Create React App 时遇到了同样的问题。这是对我有用的解决方案。请注意，我为相对路径设置了 webpack 别名
import BackgroundHeader from "assets/img/BlueDiamondBg.png"
const BackgroundHead = {
backgroundImage: 'url('+ BackgroundHeader+')'
}
<div style={BackgroundHead}>
回答by Meli
I got this to work for material-ui, where the padding on my parent element was 24px so I added 48px to the width of the background image to make it work...
我让这个用于 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>
