title: Images aren't displaying on github pages
body: <p>I'm using github pages to host a practice website.  I've built a simple JS slideshow and the images in the slideshow are not displaying.  When I use Atom live server to display the site, the images and slideshow work fine. When using github pages I inspected the active slideshow and it is moving through the image array fine as I can see the <code>src</code> attribute changing the way it should so I know the code is looping through the array properly.  I'm not sure what is wrong.</p>
  
  <p>the relevant JavaScript</p>
  
  <pre><code>const image = [
    '../images/karakoy-1.jpg',
    '../images/karakoy-2.jpg',
    '../images/karakoy-3.jpg',
    '../images/karakoy-4.jpg',
    '../images/karakoy-5.jpg',
  ];
  let i = 0;
  const imageContainer = document.getElementsByClassName('slideshow-image');
  const time = 3000;
  
  function changeSlide() {
    imageContainer[0].src = image[i];
    if (i &lt; image.length - 1) {
      i++;
    } else {
      i = 0;
    }
  
    setTimeout('changeSlide()', time);
  }
  
  changeSlide();
  </code></pre>
  
  <p>I've also checked all the spelling and capitilization on the filenames.  Everything checks out.  Like I said,  when I use Atom live server everything works fine.</p>
  
  <p>UPDATE   <a href="https://jtc10.github.io/Arcadia-Restaurant/" rel="nofollow noreferrer">https://jtc10.github.io/Arcadia-Restaurant/</a></p>
  
  <p>Here is a link to the page.  Click the "reservations" link.  The slideshow  is on that page.</p>