Javascript 使用 React 内联样式设置 backgroundImage
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39195687/
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
Setting a backgroundImage With React Inline Styles
提问by Kris
I'm trying to access a static image to use within an inline backgroundImageproperty within React. Unfortunately, I've run up dry on how to do this.
我正在尝试访问一个静态图像以backgroundImage在 React的内联属性中使用。不幸的是，我已经在如何做到这一点上枯竭了。
Generally, I thought you just did as follows:
一般来说，我认为你只是做了如下：
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
This works for <img>tags. Can someone explain the difference between the the two?
这适用于<img>标签。有人可以解释两者之间的区别吗？
Example:
例子：
<img src={ Background } />works just fine.
<img src={ Background } />工作得很好。
Thank you!
谢谢！
回答by rgommezz
The curly braces inside backgroundImage property are wrong.
backgroundImage 属性中的花括号是错误的。
Probably you are using webpack along with image files loader, so Background should be already a String:
backgroundImage: "url(" + Background + ")"
可能你正在使用 webpack 和图像文件加载器，所以 Background 应该已经是一个字符串：
backgroundImage: "url(" + Background + ")"
You can also use ES6 string templates as below to achieve the same effect:
你也可以使用如下的 ES6 字符串模板来达到同样的效果：
backgroundImage: `url(${Background})`
回答by Rushikesh Bharad
If you are using ES5 -
如果您使用的是 ES5 -
backgroundImage: "url(" + Background + ")"
If you are using ES6 -
如果您使用的是 ES6 -
backgroundImage: `url(${Background})`
Basically removing unnecessary curly braces while adding value to backgroundImage property works will work.
基本上删除不必要的花括号，同时将值添加到 backgroundImage 属性工作将起作用。
回答by Hitesh Sahu
Inline style to set any image full screen:
内联样式设置任何图像全屏：
style={{
backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}
回答by Tricky
You can also bring the image into the component by using the require()function.
您还可以使用该require()功能将图像带入组件中。
<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>
<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>
Note the two sets of curly brackets. The first set is for entering react mode and the second is for denoting object
注意两组大括号。第一组用于进入反应模式，第二组用于表示对象
回答by Hamza Khan
try this:
尝试这个：
style={{ backgroundImage: `url(require("path/image.ext"))` }}
回答by Fawaz Abdulla
You can use Template Literals (enclosed with back-tick: `...`) instead for backgroundImageproperty like this:
您可以使用模板文字（用反引号括起来：`...`）代替这样的backgroundImage属性：
backgroundImage: `url(${Background})`
回答by brianokinyi
For me what worked is having it like this
对我来说，工作是这样的
style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}
回答by Jamilur Rahman
You Can try usimg
你可以试试usimg
backgroundImage: url(process.env.PUBLIC_URL + "/ assets/image_location")
