I am not understanding how import works in React. I'm currently using create-react-app. I have a folder inside ponents folder named images:

- src
  - ponents
    - images

Insides the ponents folder I also have a js file named ProductSquare.js. I am trying to import a picture from images folder using this line

import bumper from './images/bumper1.png';

I have tried changing it to only bumper1.png and many other options. What am I doing wrong here? ( would appreciate a better way to do it in the future).

Is this how programmers import pictures in the real world?

I am not understanding how import works in React. I'm currently using create-react-app. I have a folder inside ponents folder named images:

- src
  - ponents
    - images

Insides the ponents folder I also have a js file named ProductSquare.js. I am trying to import a picture from images folder using this line

import bumper from './images/bumper1.png';

I have tried changing it to only bumper1.png and many other options. What am I doing wrong here? ( would appreciate a better way to do it in the future).

Is this how programmers import pictures in the real world?

• javascript
• reactjs

• 1 possible duplicate: stackoverflow./questions/43823289/… – Ethan Ryan Commented Jun 13, 2018 at 19:24

4 Answers 4

Try using <img src={require('./images/bumper1.png')} />

P.S. The similar question goes here

If you are using something like Webpack (which create-react-app does) then yes, you can just import the images (and most other file types). They end up getting converted into something (I believe images end up as a data URL).

If your folder structure looks like this:

• src
  • ponents
  • ProductSquare.js
  • images

Then you should be able to use the image like this:

// in ProductSquare.js
import React from 'react';
import bumper from './images/bumper1.png';

class ProductSquare extends React.Component {
  render() {
    return <img src={ bumper } />;
  }
}

If it isn't, double-check that all of the files are named what you think they should be (check for typos and what not).

If everything is correct and it isn't working, try just adding console.log(bumper) before the class. Then:

• if it outputs a string that looks like data:blahblah it should work
• if it outputs undefined, the image may not be named properly
• if it doesn't output, you might not be using ProductSquare correctly

Using the public Folder

Note: this feature is available with [email protected] and higher.

Create a folder in public folder, for example, 'image', add your photos there.

After that wherever you want you can use image address like this:

<img className="img1" src="/image/pic.jpg" alt=""/>

You Need to use .default after require

<img src={require('./images/bumper1.png').default} />