title: HTML img src returning a 404 not found error despite everything in order
body: <p>here's a confusing thing. first look at the <a href="https://i.stack.imgur.com/b5U8a.png" rel="nofollow noreferrer">hierarchy of my folders and etc.</a> and see that I have my image, "cribbage.png" under the images folder. I am trying to access this image with the following code in index.html:`</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang = "en"&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Hello World! &lt;/h1&gt;
          &lt;img src= "images/cribbage.png" width= "970" height="224"/&gt;
          &lt;div id = "future"&gt;&lt;/div&gt;
          &lt;form id = "form" id = "chat_form"&gt;
              &lt;input id = "username" type="text"&gt;
              &lt;input type = "submit" value="Play"&gt;
          &lt;/form&gt;
          &lt;script src = "/jquery/dist/jquery.js"&gt;&lt;/script&gt;
          &lt;script src = "/socket.io/socket.io.js"&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and yet, when loading the website I get
  <a href="https://i.stack.imgur.com/10nC6.png" rel="nofollow noreferrer">the following</a> and the image is replaced with the broken image icon.</p>
  
  <p>What exactly is wrong here?</p>