CODEWITHSUNDEEP
javascriptreactjs
user9878643
user9878643

Reputation: 318

importing images locally in react

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

- src
  - components
    - images

Insides the components 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?

Upvotes: 2

Views: 9572

Answers (4)

Abdul.Moqueet
Abdul.Moqueet

Reputation: 1067

You Need to use .default after require

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

Upvotes: 1

Nafis
Nafis

Reputation: 1030

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=""/>

Upvotes: 1

samanime
samanime

Reputation: 26527

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
    • components
    • 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

Upvotes: 1

inaumov17
inaumov17

Reputation: 1339

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

P.S. The similar question goes here

Upvotes: 2

Related Questions