не можете установить backgroundImage в реакции?

Question

Привет, ребята. Я пытаюсь создать свой сайт портфолио, хочу, чтобы на главной странице портфолио было фоновое изображение, и когда я перехожу к другим частям портфолио, фон становится просто цветным, я выполняю настройку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';
  }

Answer 1

Ваше фоновое изображение находится в неправильном каталоге для create-реагировать-приложение.Переместить ./src/background.jpg в ./public/background.jpg.

Answer 2

Установите className элемента, в котором вы хотите отобразить ваше изображение, равным .bgImage. В CSS-файле (называемом App.css) запишите код, приведенный ниже, который нацелен на .bgImage, и установите его фон в URLили предоставленный путь и импортируйте файл CSS в ваш основной файл, используя import './App.css';

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