CODEWITHSUNDEEP
reactjsbootstrap-4reactstrap
shan
shan

Reputation: 81

img not displaying in reactstrap carousel

Trying to get images to display in the slides in Carousel using a tag and classname. I have images saved in the same folder as the Slider.js file. I have changed the default id property in the items array to source and changed the key to item.src but still no joy. I am getting the little image symbol on the screen as though it knows it is trying to display on image, but not the actual image I want if that makes sense

import React, { Component } from "react";
import {
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
  CarouselCaption
} from "reactstrap";

const items = [
  {
    src: "slider1.jpeg",
    altText: "Slide 1",
    caption: "Slide 1"
  },
  {
    src: "slider2.jpeg",
    altText: "Slide 2",
    caption: "Slide 2"
  },
  {
    src: "slider3.jpeg",
    altText: "Slide 3",
    caption: "Slide 3"
  }
];

class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  next() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === items.length - 1
        ? 0
        : this.state.activeIndex + 1;
    this.setState({ activeIndex: nextIndex });
  }

  previous() {
    if (this.animating) return;
    const nextIndex =
      this.state.activeIndex === 0
        ? items.length - 1
        : this.state.activeIndex - 1;
    this.setState({ activeIndex: nextIndex });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({ activeIndex: newIndex });
  }

  render() {
    const { activeIndex } = this.state;

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

    return (
      <div>
        <style>
          {`.custom-tag {
                max-width: 100%;
                height: 500px;
              }`}
        </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>
    );
  }
}

export default Slider;

Upvotes: 6

Views: 3879

Answers (5)

Tobbyblaze
Tobbyblaze

Reputation: 11

I had this same problem, I tried other solutions I found online but none worked so I just went ahead to create a public folder and created an images folder inside to store all the images and did something like this src: "images/slider1.jpeg", and it worked like magic for me. You can give this a try.

Upvotes: 1

naresh solanki
naresh solanki

Reputation: 1

Put the image in the same folder where your component is. Now import that image as import image from "./exapmleimage.jpg" Now use it as src:image Worked for me

Upvotes: 0

Khadim H.
Khadim H.

Reputation: 645

1st you import your image path:

import image from '../LandingPage/image.jpg'; and then give src with out '' this:

const items = [
  {
    src: image,
    altText: 'Slide 1',
    caption: 'Slide 1',
    header: 'Slide 1 Header',
    key: '1'
  },

Upvotes: 0

Jacobo
Jacobo

Reputation: 1391

I think you have two options, the first one is to change the way you're looking for the image.

The first approach is to use require.

const items = [
  {
    src: require('./path/to/your/file.ext),
    altText: "Slide 1",
    caption: "Slide 1"
  },
  ...
]

The second one is to import your file before adding it to the items.

import Image1 from './path/to/your/file.ext';

// Then on the items
const items = [
  {
    src: Image1,
    altText: "Slide 1",
    caption: "Slide 1"
  },
  ...
]

Upvotes: 6

sirATL
sirATL

Reputation: 140

You will need to create an images folder in your public folder which will have all your pictures and then your src would look like src: './images/slider1.jpeg'

Upvotes: 1

Related Questions