CODEWITHSUNDEEP
reactjscarouselreactstrap
Christopher Littlewood
Christopher Littlewood

Reputation: 803

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

Upvotes: 2

Views: 2691

Answers (2)

Ahmed Aziz
Ahmed Aziz

Reputation: 427

Remove the curly braces from "customImage" like this

const items = [ { src: {customImage}, //Not Working altText: 'Slide 1', caption: 'Slide 1' }, { .....

To:

const items = [ { src: customImage, altText: 'Slide 1', caption: 'Slide 1' }, {.....

Upvotes: 0

user4827477
user4827477

Reputation: 56

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

Upvotes: 1

Related Questions