使用 React 内联样式设置背景图像

我正在尝试访问静态图像以在内联中使用backgroundImageReact 中的属性。不幸的是，我对如何做到这一点已经一无所知。

一般来说，我认为你只是做了如下操作：

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>
    );
  }
}

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

Example:

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

谢谢你！

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

也许您正在使用 webpack 和图像文件加载器，因此背景应该已经是一个字符串：backgroundImage: "url(" + Background + ")"

您也可以使用如下的 ES6 字符串模板来达到相同的效果：

backgroundImage: `url(${Background})`