title: Cannot use relative path when using img tag react
body: <p>I have a img tag that is not loading the image i want when i use a relative src path for my React project.
  When I do:</p>
  <pre><code>//import { ReactComponent } from '*.svg';
  import React from 'react';
  import firebase from &quot;./firebase.js&quot;;
  import &quot;./LobbyStyle.css&quot;;
  import pfp2 from &quot;./images/pfp2.png&quot;
  
  class ImgButton extends React.Component {
  
      constructor(props){
          super();
      }
  
      render(props){
          return (&lt;button style = {{backgroundColor : &quot;rgba(0,0,0,0)&quot;, borderColor: &quot;rgba(0,0,0,0)&quot;}}&gt;&lt;img src = {pfp2} onClick = {this.props.onClick}/&gt;&lt;/button&gt;)
      }
  }
  
  class ImgRow extends React.Component {
  
      render(){
          var iconlist = this.props.images.map(image =&gt; 
              &lt;div key = {image} &gt;
                  &lt;ImgButton onClick = {this.props.onClick} img = {image}/&gt;
              &lt;/div&gt;
          )
          return(
              &lt;div style={{display: &quot;flex&quot;}}&gt;
                  {iconlist}
              &lt;/div&gt;
          )
      }
  }
  
  export default ImgRow;
  </code></pre>
  <p>It displays the following:
  <a href="https://i.stack.imgur.com/oVlTX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVlTX.jpg" alt="pfp2 is the orange doodle on the right" /></a></p>
  <p>However when I replace the imported image with a relative path It doesn't load:</p>
  <pre><code>//import { ReactComponent } from '*.svg';
  import React from 'react';
  import firebase from &quot;./firebase.js&quot;;
  import &quot;./LobbyStyle.css&quot;;
  //import pfp2 from &quot;./images/pfp2.png&quot;
  
  class ImgButton extends React.Component {
  
      constructor(props){
          super();
      }
  
      render(props){
          return (&lt;button style = {{backgroundColor : &quot;rgba(0,0,0,0)&quot;, borderColor: &quot;rgba(0,0,0,0)&quot;}}&gt;&lt;img src = {&quot;./images/pfp2.png&quot;} onClick = {this.props.onClick}/&gt;&lt;/button&gt;)
      }
  }
  
  class ImgRow extends React.Component {
  
      render(){
          var iconlist = this.props.images.map(image =&gt; 
              &lt;div key = {image} &gt;
                  &lt;ImgButton onClick = {this.props.onClick} img = {image}/&gt;
              &lt;/div&gt;
          )
          return(
              &lt;div style={{display: &quot;flex&quot;}}&gt;
                  {iconlist}
              &lt;/div&gt;
          )
      }
  }
  
  export default ImgRow;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/zcavZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcavZ.jpg" alt="enter image description here" /></a></p>
  <p>What am i doing wrong? is it necessary to import my images? Here is my file path, as you can see i believe the relative path is correct, since the images folder is in the same folder as my code:
  <a href="https://i.stack.imgur.com/k3pxN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k3pxN.png" alt="enter image description here" /></a></p>