javascript - 如何在 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 做了一些我不知道的事情吗？

Answer 1

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

例如:

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

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

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