无法在反应中设置backgroundImage？

Question

嘿，我正在尝试建立我的投资组合网站，我想使投资组合的主页具有背景图像，当我导航到投资组合的其他部分时，背景只是彩色，因此我处理了设置backgroundColor成功，但是不能正确执行backgrounImage。 这是我的代码。

  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';
  }

Answer 1

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

将CSS文件导入到您的主文件中

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

Answer 2

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