Using React linking images inside of components

Question

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;

Possible duplicate of [Correct path for img on React.js](http://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js) — radiovisual, May 21 '17 at 07:40

score 4 · Accepted Answer · edited May 23 '17 at 11:33

One quick and clean approach is to import the image the same way you would import or require() a module:

import image1 from './path/to/image';

And then reference that image from JSX:

<img width={900} height={500} alt="" src={image1} />

The path to the image might be auto-resolved for you, depending on how your bundler (webpack, etc) is setup.

On the other hand, if you aren't importing the image the same way you import a module (and you are referencing the image path directly inline from JSX or a component), you don't need to prepend the image src with ./ (because it's not an import, it's just a regular relative path), so just write your inline src calls to point to the image the same way you would write it in HTML (where the path equals the relative path back to the images directory relative to the HTML file):

So this:

<img width={900} height={500} alt="" src="./src/images/Ian_FMD_400.jpg" />

Might be:

<img width={900} height={500} alt="" src="images/Ian_FMD_400.jpg" />

So just to recap, two different in the two ways to import an image:

// option one (imports)
import image1 from './path/to/image/relative/to/COMPONENT';
<img src={image1} />

// option two (relative paths inline)
<img src="path/to/image/relative/to/HTML" />

You might also get some clues by reading: Correct path for img on React.js

score 2 · Answer 2 · answered May 20 '17 at 21:45

2

Well, you said:

"... I have a file website_index.js inside my components folder inside my src folder."

You also said:

"...Also inside my src folder is an images folder."

So, your project structure is something like that:

src
|_ components
|_ images

Try this:

<img width={900} height={500} alt="900x500"  src={require('../images/Ian_FMD_400.jpg')}/>

answered May 20 '17 at 21:45

Pablo Darde

5,844
10
37
55

Are you using any task runner like "webpack" or "gulp"? – Pablo Darde May 20 '17 at 22:02
Ok, often when we are developing some application, with react, or angular, or some other framework, we use some task runner such as "webpack" and "gulp". Then, this task runner take care about how to build our production (or public folder), for us. For more information visit https://webpack.github.io/docs/ If you want to see this in the real world, you can check out this project using React and Webpack to build the "production" version. https://github.com/darde/RD-Book-Store – Pablo Darde May 20 '17 at 22:10

Using React linking images inside of components

2 Answers2