reactstrap 轮播图像显示问题（过去的帖子没有帮助）答案

【问题标题】：reactstrap carousel image display issue (past posts didn't help)reactstrap 轮播图像显示问题（过去的帖子没有帮助）
【发布时间】：2020-01-02 14:08:21
【问题描述】：

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

img not displaying in reactstrap carousel

Reactstrap - Display local image on carousel

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

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 链接，但这也不起作用。

渲染方法：

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>
    );

有什么想法吗？

【问题讨论】：

标签： reactjs carousel reactstrap

【解决方案1】：

您可以在CarouselItem中添加img标签，并通过类名设置图片的样式。

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>
      );
    });

【讨论】：