Блог

Главная - Вопросы по программированию - Настройка фона тела -изображение внутри useEffect

Настройка фона тела -изображение внутри useEffect

#reactjs

#reactjs

Вопрос:

Я хочу установить фоновое изображение тела документа при рендеринге моего компонента приложения. Изображение находится в том же каталоге, что и файл js, однако оно не отображается.

У меня есть следующий код.

App.js

 import { useEffect } from 'react'; 
import './App.css';

function App() {

  const bg = "./clouds.png";

  useEffect(() => {
    document.body.style.backgroundImage = `url('${bg}')`;

  }, [])

  return (
    <div className="App">

    </div>
  );
}

export default App;

clouds.png находится в src каталоге вместе с App.js

Комментарии:

1. Не уверен, что без дополнительной структуры кода / HTML. Я бы проверил консоль, чтобы узнать, загружается ли правильное изображение? Если это так, у вас может не быть высоты для вашего тела. Установка фонового изображения не дает контейнеру высоту, если внутри нет другого содержимого.

2. Я протестировал ваш код, и он работает нормально. Есть ли какая-либо ошибка? вы возвращаете какой-нибудь HTML-код?

3. Я обновил свой вопрос

Ответ №1:

Вам нужно import изображение.

 import React, { useEffect } from "react";
import "./styles.css";
import bg from "./clouds.png";

export default function App() {
  useEffect(() => {
    document.body.style.backgroundImage = `url('${bg}')`;
  }, []);
  return <div className="App"></div>;
}

проверьте это:
рабочий пример

Ответ №2:

Попробуйте это:

 const bg = require("../assets/img/your-image.png");
document.body.style.backgroundImage = `url(${bg})`;

Комментарии:

1. Все еще безуспешно. Спасибо вам за ваш ответ

2. Вы уверены, что путь, который вы определяете, правильный?