图像未显示在github页面上

Question

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 src attribute changing the way it should so I know the code is looping through the array properly. I'm not sure what is wrong.

the relevant JavaScript

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 < image.length - 1) {
    i++;
  } else {
    i = 0;
  }

  setTimeout('changeSlide()', time);
}

changeSlide();

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.

UPDATE https://jtc10.github.io/Arcadia-Restaurant/

Here is a link to the page. Click the "reservations" link. The slideshow is on that page.

Answer 1

It's most likely an issue resolving relative paths between your local and live servers.

The requests with the relative paths are all returning 404 Not Found:

I prefer to use the full path from root instead. This takes the ambiguity out of the situation.

const image = [
    '/images/karakoy-1.jpg',
    '/images/karakoy-2.jpg',
    '/images/karakoy-3.jpg',
    '/images/karakoy-4.jpg',
    '/images/karakoy-5.jpg',
];

Answer 2

它尝试加载不存在的https://jtc10.github.io/images/karakoy-2.jpg ，从图像路径中删除../ 。