Bootstrap 轮播图像不显示

时间:2021-07-05 13:08:18

标签: reactjs react-bootstrap

我尝试将 carousel 部件作为组件制作以使其有条理,但是 carousel 中不存在 carousel 的图像,即使图像 src 是正确的。我在名为 Panner.js 的文件中制作了旋转木马,在名为 CarouselItemChild.js 的单独文件中制作了 Carousel Item 我通过了 srcCarousellabeldescription作为 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;

0 个答案:

没有答案