使用React内联样式设置backgroundImage

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试访问静态图像以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 } /> 效果很好。

谢谢！

回答：

backgroundImage属性内的花括号错误。

可能您正在将webpack与图像文件加载器一起使用，因此Background应该已经是一个String了： backgroundImage: "url("

+ Background + ")"

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

backgroundImage: `url(${Background})`

以上是 使用React内联样式设置backgroundImage 的全部内容， 来源链接： utcz.com/qa/436410.html

回到顶部