CODEWITHSUNDEEP
reactjscarouselreactstrap
apollo24
apollo24

Reputation: 313

reactstrap carousel image display issue (past posts didn't help)

I've tried to use these past posts without success :

img not displaying in reactstrap carousel

Reactstrap - Display local image on carousel

I'm trying to display a local image on reactstrap carousel. When I use the import solution mentioned in the posts above it shows blank frame, and when i'm trying to use the public/images idea it bring me to this error : 

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.

I've tried to require the file too from the src field like that : 

src: require("../../public/img-01.JPG"),

But it returned the same error.

My code : 

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

As you can see I tried and HTTP link of the image too in the second slide but that ain't working too.

The render method :

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

Any ideas?

Upvotes: 0

Views: 408

Answers (1)

user11910739
user11910739

Reputation:

You can add the img tag in CarouselItem and set the style for image via class name.

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

Upvotes: 1

Related Questions