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

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.

  

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: