无法在反应中设置背景图像？答案

【问题标题】：can't set backgroundImage in react?无法在反应中设置背景图像？
【发布时间】：2018-10-07 01:27:16
【问题描述】：

嘿，伙计们，我正在尝试构建我的作品集网站，我想让作品集的主页具有背景图像，当我导航到作品集的其他部分时，背景只是颜色，我处理了设置backgroundColor 成功但不能正确地做背景图像。这是我的代码。

  componentDidMount(){
      this.props.changePage("Main Page");
      document.body.style.backgroundImage="url('background.jpg')";
  }

这是主页面组件内的代码，但似乎有问题，是语法本身有问题还是方法本身有问题？

编辑 1！！

这是我用于 backgroundColor 的代码，它正在工作，为什么它不能与 backgroundImage 一起工作。

  componentDidMount(){
      this.props.changePage("About Me");
      document.body.style.backgroundColor='black';
  }

【问题讨论】：

【解决方案1】：

将要显示图像的元素的类名设置为等于.bgImage。在CSS文件（命名为App.css）中，写下下面给出的针对.bgImage的代码，并将其背景设置为URL或提供的路径并使用 import './App.css'; 将 CSS 文件导入主文件中

.bgImage {
  background: url(./media/hero.jpg) no-repeat center center;
  //some other properties 
}

【讨论】：

我已经尝试过类似的东西，但问题是我需要背景是动态的，并且这样做可以静态设置背景。这是 git hub 上的仓库：github.com/Lina-Basuni/Portfolio
您希望背景在一段时间后在同一页面上发生变化，还是背景应该在不同页面上发生变化？
我希望它在不同的页面上更改
我有 4 个页面，我希望每个页面都有不同的背景，我设法用 backgroundColor 属性做到了这一点，但用 backgroundImage 属性却做不到
因为你有4个不同的页面，试试这个，在你想显示图像的每个页面设置不同的className（例如在第1页设置它等于.bgImage1，在第二页设置它等于.bgImage2等等）然后在CSS文件中分别定位这些类，即将.bgImage1中的背景属性设置为等于`背景：url（./media/hero1.jpg）`，然后在@中设置背景属性987654329@ 等于 `background: url(./media/hero2.jpg)` 并且所有 4 个图像元素都相同，然后只需导入 CSS 文件。这应该可以解决您的问题。谢谢

【解决方案2】：

您的背景图片位于 create-react-app 的错误目录中。将./src/background.jpg 移至./public/background.jpg。

【讨论】：