Хочу менять background-image в блоке div в зависимости от условия. Использовал useRef для привязки к блоку ref, но через него не удаётся и не добавляется стиль css. Возможно, это из-за не работающего пути к изображению, которое находится в папке public, хотя, вроде как, всё должно работать. Может кто-то знает или делал подобный функционал?
export default function Welcome() {
const [interval, setInterval] = useState(null);
const timeRef = useRef(null);
useEffect(() => {
const time = new Date();
if (time.getHours() >= 6 && time.getHours() < 12) {
setInterval("1");
welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
} else if (time.getHours() >= 12 && time.getHours() < 18) {
setInterval("2");
welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
} else if (time.getHours() >= 18) {
setInterval("3");
welcomeRef.current.style.backgroundImage = "/assets/img/morning.jpg";
}
});
return (
<section className="welcome" ref={timeRef}>
<div className="time__wrapper">
<div className="time__text">
<h1 className="time__heading">Сейчас: {interval}!</h1>
</div>
</div>
</section>
);
}