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

Question

我有一个reactjs / webpack应用程序并尝试为bodytag设置背景图像：

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

但是，在加载组件之后，页面中将不显示主体样式，尽管它会显示在控制台中。在webpack加载的CSS文件中有CSS规则的同时，是否可以在主页上显示背景图像？这是因为reactjs做了我不知道的事情吗？

Answer 1

背景应该已经是一个字符串：

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

您还可以使用 ES6 字符串模板：

backgroundImage: `url(${Background})`

你应该阅读这个它可能会有所帮助 -

Answer 2

您需要将图像放在项目的“公共”文件夹中。然后，您可以通过键入以下内容来访问它们：

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

CSS也是如此

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

Answer 3

您需要将图像存储在项目的 src 文件夹中。您可以使用“./”引用 css 文件中的图像，该文件也应该位于 src 文件夹中

例如：您的图像在此目录“src/images/background.jpg”中

然后您可以通过以下方式在 css 文件（位于“src”文件夹中）中引用它：

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

Answer 4

纯 ReactJS 和内联 CSS

如果您正在寻找直接方法并local在这种情况下使用文件。尝试

import Image from "../../assets/image.png"

<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Background Image
</div>

ReactJS这是内联样式的情况，Image其中必须使用路径导入本地文件。