如何在 reactjs 中设置背景图片？

Question

我有一个 reactjs/webpack 应用程序并尝试为 body 标签设置背景图片：

 body{
    background: url("../images/some-background.jpg");
    background-size:contain;
    background-position:top;
    background: cover;
}

但是加载组件后页面中不存在 body 样式。它虽然出现在控制台中。有没有办法在主页中显示背景图片，同时在 webpack 加载的 CSS 文件中包含 CSS 规则？这是因为 Reactjs 做了一些我不知道的事情吗？

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

Answer 1

您需要将图像存储在项目的 public 文件夹中。您可以使用正斜杠引用 public 文件夹 / 并从那里访问您的图像。

例如：

 <img src="/background.jpg" />

您可以在 CSS 文件中执行相同的操作：

 .background {
   background-image: url("/background.jpg");
}

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