使用React Inline样式设置backgroundImage

我试图访问一个静态图像内使用React内联backgroundImage属性。 不幸的是，我已经干了如何做到这一点。

一般来说，我以为你只是做了如下：

 import Background from '..http://img.dovov.combackground_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } 

这适用于<img>标签。 有人可以解释两者之间的区别吗？

例：

<img src={ Background } />工作得很好。

谢谢！

Answer 1

backgroundImage属性中的花括号是错误的。

可能你正在使用webpack和图像文件加载器，所以背景应该已经是一个string： backgroundImage: "url(" + Background + ")"

您也可以使用ES6string模板来达到同样的效果：

 backgroundImage: `url(${Background})`