Unable to load images from local library in React.js

Question

I have written a code for my website and unfortunately, i am not able to load images that are located in my local library. I have moved my images folder inside \'src\' folde

Answer 1

If you have a few images you can just import it directly in your component

import logo from './Pictures/1.jpg';

Then call it

<img src={logo} alt="logo" width={"240"} height={"240"}  />

if you have hundreds of images because you can’t use import paths, you have to create a images folder in the public folder and use this code.

 //This is the regular way.

  <img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />

Another way you can specify each component has a images.js file, then import all the images that retarded of that component in images.js and name it as the related component name

images.js

import logo from './images/logo.svg';
import cover from './images/cover.svg';
import profile from './images/profile.svg';
import background1 from './images/body.svg';
export default {
    logo,
    cover,
    profile,
    background1
}

Then in your component you can just import images.js file:

import images from './images';

Then call any img you want:

      <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

Answer 2

My answer only applies if you are using create-react-app or Webpack with the file-loader plugin.

You have to import the picture file before using it. This has to be done in order for Webpack to bundle the images correctly for the production build.

import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">

You can read more here.