Search code examples
reactjscarouselreactstrap

Reactstrap - Display local image on carousel

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

Solution

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

    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