How to add an onload without a fetch call in a function based component

You can apply logic something like this

import React, {useState} from "react";
import { Carousel } from "react-bootstrap";
function CarouselHome() {
  const [imageLoaded, setImageLoaded]=React.useState(false);
  return (
    <>
      <Carousel fade pause="hover" id="carousel" variant="">
        <Carousel.Item>
          <img
            className={`w-100 ${
               imageLoaded ? 'd-block' :  'd-none'
            }`}
            src="https://source.unsplash.com/1280x400/?bali"
            alt="First slide"
            onLoad={()=> setImageLoaded(true)}}
          />
           {!imageLoaded && (
             <div className="smooth-preloader">
                   
             </div>
          )}
          <Carousel.Caption>
            <p>Bali, Indonesia</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </>
  );
}

export default CarouselHome;

i declared state variable with the name imageLoaded and changing this state on onLoad function of img and also changing the className based on state change

You can achieve that with this structure. Create <Image/> and <Loader/> component.

const Image = ({item}) => {
const [imageLoaded, setImageLoaded] = useState(false);

  const handleImageLoad = () => {
    setImageLoaded(true);
  };

  return (
    <div>
      {!imageLoaded && <Loader />}
      <img src={item.src} alt={item.alt} onLoad={handleImageLoad} />
    </div>
  );

}