Using React linking images inside of components

Viewed 4699

I am learning react. I have a file website_index.js inside my components folder inside my src folder. Also inside my src folder is an images folder. I am trying to link pictures in a carousel to the pictures in the image folder but no matter what path I enter it does not find them. Is it impossible to display these pictures?

Will someone please tell me the proper way to do this.

import React, { Component } from 'react';
import { Jumbotron, Carousel } from 'react-bootstrap';

class Home extends Component {

  render() {
    return (
      <Jumbotron>
      <Carousel>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="./images/Ian_FMD_400.jpg"/>
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="../images/Ian_FMD_400.jpg"/>
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="./src/images/Ian_FMD_400.jpg"/>
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
      </Jumbotron>
    );
  }
}

export default Home;
2 Answers
Related