reactjs - 引导轮播图像不显示

Question

我尝试将轮播部件作为组件进行组织，但轮播的图像在轮播中并不存在，即使图像 src 是正确的。我在名为的文件中制作了轮播，Panner.js并在名为的分隔文件中制作了轮播项目，我CarouselItemChild.js通过了src,和as 道具CarousellabeldescriptionCarouselItemChild

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;

标签： reactjsreact-bootstrap