Reactstrap-在转盘上显示本地图像 [英] Reactstrap - Display local image on carousel

问题描述

我正在尝试使用存储在我的react应用程序目录中的图像创建轮播。当我使用默认示例时：

只要文件名正确且位于该位置，您的代码应该可以工作。
至少对于以create-react-app基础开头的应用程序，它确实如此

I am trying to create a carousel with images that are stored in the directory of my react app. When I use the default example ones found here:

https://reactstrap.github.io/components/carousel/

Everything works fine. The problem is when I add my custom images.

import customImage from './images/customImage.jpg';
const items = [
  {
    src: {customImage}, //Not Working
    altText: 'Slide 1',
    caption: 'Slide 1'
  }, 
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800   %22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 2',
    caption: 'Slide 2'
    //Working
  },
  {
    src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
    altText: 'Slide 3',
    caption: 'Slide 3'
    //Working
  }
];

The code for my carousel is as follows:

const slides = items.map((item) => {
  return (
    <CarouselItem
      className="trustedMechsCarousal"
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
    <img src={item.src} alt={item.altText} />
    <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

return(
  <div className='TrustedMechs'>
    <div className='SectionTitle'><h1>Trusted Mechanics</h1></div>
      <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>
  </div
);

The link below is to a question that seams to have the same problem as me but was caused by the html not rendering the carousel. My carousel is rendering, just not showing the image.

Carousel not displaying image

解决方案

When you source an image like that, it looks inside of the public folder for the /images folder.

Your code should work, provided the name of the file is correct, and it's in that location. At least with apps started with a create-react-app foundation, it does

这篇关于Reactstrap-在转盘上显示本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！