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

Question

我正在尝试访问要在内联中使用的静态图像 backgroundImage React 中的属性。不幸的是，我对如何做到这一点已经精疲力尽。

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

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>标签。谁能解释一下两者的区别？

例子:

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

谢谢!

Answer 1

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

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

你也可以使用下面的 ES6 字符串模板来达到同样的效果:

backgroundImage: `url(${Background})`