Question

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

img not displaying in reactstrap carousel

Reactstrap - Display local image on carousel

我正在尝试在reactstrap轮播上显示本地图像。当我使用上面文章中提到的导入解决方案时，它显示为空白框架，而当我尝试使用public / images想法时，将我带到此错误：

const rmClickedClass = () => (
  document.querySelectorAll(".clicked").forEach(
    (link) => link.classList.remove('clicked')
  )
);

document.querySelectorAll(".menu-left p a").forEach((link) => {
  link.addEventListener("click", () => {
    rmClickedClass();
    link.classList.add('clicked');
  });
};

我也试图从src字段中要求该文件：

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: require("../../public/img-01.JPG"),

如您所见，在第二张幻灯片中，我也尝试了该图像的HTTP链接，但这也没有用。

render方法：

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

有什么想法吗？

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

reactstrap轮播图像显示问题（过去的帖子无济于事）

1 个答案: