Q: Bootstrap Carousel Image doesn't show I try to make carousel parts as components to make it organized but the images of carousel doesn't exist in carousel even the image src is correct. I made the carousel in file called Panner.js and Carousel Item in separated file called CarouselItemChild.js I pass the src, Carousel, label and description as props in CarouselItemChild
Panner.js
import React from 'react';
import { Carousel } from 'react-bootstrap';
import './Panner.css';
import first from '../assets/blue/20210609_172157.jpg';
import second from '../assets/gray/20210612_154438.jpg';
import third from '../assets/pink/20210511_174415.jpg';
import CarouselItemChild from './CarouselItem/CarouselItemChild';
const Panner = () => {
return (
    <Carousel className="panner">
        <CarouselItemChild
            Carousel={Carousel}
            src={first}
            label={'blue silk scarf'}
            description={
                'description blue silk scarf description blue silk scarf description blue silk scarf'
            }
        />
        {/* <img src={first} alt="" srcset="" /> */}
    </Carousel>
);
   };

 export default Panner;

CarouselItemChild
import React from 'react';

const CarouselItemChild = ({ Carousel, src, label, description }) => {
return (
    <Carousel.Item interval={1000}>
        <img className="d-block w-100" src={src} alt="a slider" />
        <Carousel.Caption>
            <h3>{label}</h3>
            <p>{description}</p>
        </Carousel.Caption>
    </Carousel.Item>
);
};

export default CarouselItemChild;

