尽管图像更改显示在控制台中，但无法使用 javascript 更改背景图像？

Question

大家好，我正在尝试使用 javascript 以 3 秒的间隔更改背景图像，代码似乎是正确的，因为可以在控制台中看到图像发生变化 但不是在屏幕上，我在 3 秒后看到空白屏幕。

这是我的反应代码

import React, { useEffect, useState } from "react";

function Home() {
  let i = 0; // Start index from 0

  useEffect(() => {
    const interval = setInterval(backgroundImages, 3000);
    return () => {
      clearInterval(interval); // Clean up the interval when the component unmounts
    };
  }, []);

  function backgroundImages() {
    const imagearr = [
      "rajwada.jpeg",
      "indore.jpeg",
      "females.jpeg",
      "mayor.jpg"

    ]


    console.log("Changing background image");
    document.getElementById("main").style.backgroundImage = `url(${imagearr[i]})`;
    i++;
    if (i === imagearr.length) {
      i = 0;
    }
  }


  return (
    <div className="PARENTHERO">

      <div className="Hero" id="main" >
        {/* <div className="WELCOME">
        <h1 className="Heading2">LUCKY DRAW</h1>
        <h1 className="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
        </div> */}
      </div>
    </div>
  );
}

export default Home;

这是我的CSS类

.Hero {
    background-image: url(mayor.jpg);
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.PARENTHERO {
    height: 100%;
}

默认情况下，我在后台使用图像，也认为图像的名称是正确的并且没有路径问题

Answer 1

您的样式未被应用

className

应该是

class

:

<div class="PARENTHERO">
  <div class="Hero" id="main" >
    {/* <div class="WELCOME">
      <h1 class="Heading2">LUCKY DRAW</h1>
      <h1 class="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
    </div> */}
  </div>
</div>