reactstrap 旋转木马图像显示问题(过去的帖子没有帮助)

reactstrap carousel image display issue (past posts didn't help)

我尝试使用这些过去的帖子但没有成功:

img not displaying in reactstrap carousel

我正在尝试在 reactstrap 轮播上显示本地图像。 当我使用上面帖子中提到的导入解决方案时,它显示空白框,当我尝试使用 public/images 想法时,它给我带来了这个错误:

Module not found: You attempted to import ../../public/img-01.JPG which 
falls outside of the project src/ directory. Relative imports outside of 
src/ are not supported.

我也试过像这样从 src 字段中请求文件:

src: require("../../public/img-01.JPG"),

但它返回了同样的错误。

我的代码:

import image1 from "../images/img-01.JPG"

const items = [
{
  src: image1,
  altText: 'Slide 1',
  caption: 'Slide 1'
},
{
  src: "https://i.imgur.com/jDiYpKY.jpg",
  altText: 'Slide 2',
  caption: 'Slide 2'
}
];


const settings = {
dots: false,
infinite: true,
arrows: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};

如您所见,我在第二张幻灯片中也尝试了图片的 HTTP link,但这也不起作用。

渲染方法:

render() {

    const { activeIndex } = this.state;

    const slides = items.map((item) => {
      return (
        <CarouselItem
          className="custom-tag"
          tag="div"
          key={item.id}
          onExiting={this.onExiting}
          onExited={this.onExited}
        >
          <CarouselCaption className="text-danger" captionText= 
{item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

    return (
        <div>
        {/* <style>
          {
            `.custom-tag {
                max-width: 100%;
                height: 500px;
                background: black;
              }`
          }
        </style> */}
        <Carousel
          activeIndex={activeIndex}
          next={this.next}
          previous={this.previous}
        >
          <CarouselIndicators items={items} activeIndex={activeIndex} 
onClickHandler={this.goToIndex} />
          {slides}
          <CarouselControl direction="prev" directionText="Previous" 
onClickHandler={this.previous} />
          <CarouselControl direction="next" directionText="Next" 
onClickHandler={this.next} />
        </Carousel>
      </div>
    );

有什么想法吗?

您可以在CarouselItem中添加img标签,通过class名称设置图片样式。

const slides = items.map((item) => {
      return (
        <CarouselItem
          className="custom-tag"
          tag="div"
          key={item.id}
          onExiting={this.onExiting}
          onExited={this.onExited}
        >
          <img className="carousel-img" src={item.src} />
          <CarouselCaption className="text-danger" captionText= 
{item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });