使用 React 内联样式设置 backgroundImage

Question

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

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

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 } /> 工作得很好。

谢谢！

原文由 Kris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

可能您正在使用 webpack 和图像文件加载器，所以 Background 应该已经是一个字符串：

backgroundImage: "url(" + Background + ")"

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

 backgroundImage: `url(${Background})`

原文由 rgommezz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

内联样式设置任何图像全屏：

 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'
}}

原文由 Hitesh Sahu 发布，翻译遵循 CC BY-SA 4.0 许可协议