Reactjs – page loading before images load

i have a website about music instruments and i have a carousel of images that spin at intervals and the problem accrued when i transformed my high res images to base64 so they can be put in my data base and the problem is that my page loads without the images and after a certain amount of time they appear that looks so bad for the viewers so im asking what can i do to fix it.

import mainpage from "../styles/mainpage.module.css";
import Rarrow from "../images/rightarrow.png";
import Larrow from "../images/leftarrow.png";
import empty from "../images/emptyItem.png";
import fill from "../images/currentItem.png";
import bassPlayer from "../images/personOnBass.jpg";
import pianoPlayer from "../images/personOnPiano.jpg";
import fender from "../images/fender.png";
import yamaha from "../images/yamaha.png";
import thomann from "../images/thomann.png";
import violinPlayer from "../images/personOnViolin.jpg";
import { useState, useEffect } from "react";
import Image from "next/image";
import NSPath from "../images/ns.png";
import gibsonPath from "../images/gibson.png";
import rolandPath from "../images/roland.png";
import ibanezPath from "../images/ibanez.png";
import gear4Path from "../images/gear4music.jpg";

export default function Home() {
  const [currentItem, setCurrentItem] = useState(0);
  const [allImg, setAllimages] = useState([]);

  const brandNames = [
    { name: "Yamaha", path: yamaha },
    { name: "Fender", path: fender },
    { name: "NSDesign", path: NSPath },
    { name: "Gibson", path: gibsonPath },
    { name: "Ibanez", path: ibanezPath },
    { name: "Gear4Music", path: gear4Path },
    { name: "Roland", path: rolandPath },
  ];

  useEffect(() => {
    fetch("http://localhost:3000/api/displayImg")
      .then((res) => {
        return res.json();
      })
      .then((rez) => {
        setAllimages(rez.data);
      });
  }, []);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentItem((prevItem) => (prevItem + 1) % 5);
    }, 5000);

    return () => clearInterval(intervalId); // Cleanup the interval on component unmount
  }, []);

  const next = () => {
    setCurrentItem(() => {
      if (currentItem != 4) {
        return currentItem + 1;
      } else {
        return 0;
      }
    });
  };
  const previous = () => {
    setCurrentItem(() => {
      if (currentItem != 0) {
        return currentItem - 1;
      } else {
        return 4;
      }
    });
  };
  const change = (e) => {
    const id = e.target.id;
    setCurrentItem(Number(id));
  };
  let arr = [];
  for (let i = 0; i < allImg.length; i++) {
    arr.push(
      <Image
        key={i}
        onClick={change}
        src={i === currentItem ? fill : empty}
        alt="arrow"
        width={20}
        height={20}
        className={mainpage[`selector${i}`]}
        id={i}
      />
    );
  }
  const toShop = (e) => {
    if (e.target.id == "instrument0") {
      window.location.href = `/e-commerce/shop?name=keyboards`;
    }
    if (e.target.id == "instrument1") {
      window.location.href = `/e-commerce/shop?name=headphones`;
    }
    if (e.target.id == "instrument2") {
      window.location.href = `/e-commerce/shop?name=guitars`;
    }
    if (e.target.id == "instrument3") {
      window.location.href = `/e-commerce/shop?name=speakers`;
    }
    if (e.target.id == "instrument4") {
      window.location.href = `/e-commerce/shop?name=guitars`;
    }
  };

  return (
    <div className={mainpage.FirstPage}>
      <div className={mainpage.gallery}>
        {allImg.map((el, index) => {
          return (
            <img
              key={index}
              id={`instrument${index}`}
              className={[
                mainpage.galleryItem,
                mainpage[`galleryItem${((currentItem + (index + 1)) % 5) + 1}`],
              ].join(" ")}
              src={el.proImg}
              alt="images"
              onClick={toShop}
            />
          );
        })}
        <Image
          onClick={next}
          className={mainpage.rightArrow}
          src={Rarrow}
          alt="arrow"
          width={100}
          height={100}
        />
        <Image
          onClick={previous}
          className={mainpage.leftArrow}
          src={Larrow}
          alt="arrow"
          width={100}
          height={100}
        />
        {arr.map((el) => {
          return el;
        })}
      </div>
      <div className={mainpage.sponsorImages}>
        <div className={mainpage.bassImage}>
          <Image width={0} height={730} src={bassPlayer} alt="brandImg" />
          <Image
            width={0}
            height={0}
            src={fender}
            className={mainpage.fender}
            alt="brandImgLogo"
          />
        </div>
        <div className={mainpage.pianoImage}>
          <Image
            width={0}
            height={730}
            src={pianoPlayer}
            style={{ height: "100%" }}
            alt="brandImg"
          />
          <Image
            width={0}
            height={0}
            src={yamaha}
            className={mainpage.yamaha}
            alt="brandImgLogo"
          />
        </div>
        <div className={mainpage.violinImage}>
          <Image width={0} height={730} src={violinPlayer} alt="brandImg" />
          <Image
            width={0}
            height={0}
            src={thomann}
            className={mainpage.thomann}
            alt="brandImgLogo"
          />
        </div>
      </div>

      <div className={mainpage.brands}>
        <div className={mainpage.brand}>
          {brandNames.map((el, index) => {
            return (
              <div
                style={{ display: "inline-flex", margin: "0px 40px" }}
                key={index}
              >
                <Image
                  width={0}
                  height={100}
                  className={[mainpage.brand, mainpage[el.name]]}
                  src={el.path}
                  alt="brand"
                />
              </div>
            );
          })}

          {brandNames.map((el, index) => {
            return (
              <div
                style={{ display: "inline-flex", margin: "0px 40px" }}
                key={index + "copy"}
              >
                <Image
                  width={0}
                  height={100}
                  className={[mainpage.brand, mainpage[el.name]]}
                  src={el.path}
                  alt="brand"
                />
              </div>
            );
          })}
        </div>
      </div>

      <hr style={{ width: "95%", height: "3px", backgroundColor: "gray" }} />
    </div>
  );
}