title: Good practice to import images in ReactJS?
body: <p>I am adding multiple images in my web page by placing each image in same directory that of components (see screenshot) How can I place the image files in another folder and then access them inside my components.</p>
  
  <p>content.js:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import java from './java.png';
      import neural from './neural.png';
      import future from './future.gif';
      import neuralnet from './neuralnet.jpg';
      import dsa from './dsa.png';
      import dl from './dl.jpg';
      import ml from './ml.jpg';
      import python from './python.png';
      import ai from './ai.jpg';
  
  
  &lt;img className="futuregif" src={future} alt="gif" height="240" width="320"&gt;&lt;/img&gt;
  &lt;img className="javacardimg" src={java} alt="Java" height="65" width="65"&gt;&lt;/img&gt;
   &lt;img className="neuralcardimg" src={neural} alt="neural" height="65" width="65"&gt;&lt;/img&gt;
  
  and so on.. for all other images
  </code></pre>
  
  <p>Components and image files are getting mixed together is there any other specific way to do it by making a image folder but then what should be the path in <code>src=""</code>.</p>
  
  <p>File structure:</p>
  
  <p><a href="https://i.stack.imgur.com/FPEFM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FPEFM.png" alt="enter image description here"></a></p>