title: Can not load image into index.js in React
body: <p>Problem:</p>
  
  <p>My image would not show up when I render the code. It only returns the icon for when an image is not loaded correctly. I have read that I need to add my image to the public folder so the webpack will not affect the path, but I do not know how to add it correctly to the public folder. Is is a special path to this  public folder, or do I need to do any specific stuff to make a folder public?</p>
  
  <p>I have tried the following:</p>
  
  <ul>
  <li><p>Add image to a folder called "public" and importet the file inside index.js like this:</p>
  
  <pre><code>import img from '../../public/myimage.jpg';
  
  &lt;img src={img} /&gt;
  </code></pre></li>
  <li><p>and also tried to just add the path directly inside src:</p>
  
  <pre><code>&lt;img src="../../public/myimage.jpg" /&gt;
  </code></pre></li>
  <li><p>and I have also tried the same thing with the image inside the same folder as the index.js file with this path:</p>
  
  <pre><code>'./myimage.jpg"
  </code></pre></li>
  </ul>
  
  <p>but these efforts have not worked. How can I add an image to my React code?</p>