title: How to import images in react from different file?
body: <p>first off here is an image of my project structure to help with visualising the issue here:</p>
  <p><a href="https://i.stack.imgur.com/mcdMy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mcdMy.png" alt="enter image description here" /></a></p>
  <p>in my components folder there is a file homepage.js, im trying to import an image which is in the folder icons. im not to sure how to reference the image since the image and the homepage file are not in the same folder. I tried placing the image in the components file and importing it like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import baseball from './baseball.png';</code></pre>
  </div>
  </div>
  </p>
  <p>It works as intended. Im trying to find out how to import the image while in the icon folder without having to move it.</p>