javascript - 图像未显示在 github 页面上

Question

我正在使用 github 页面来托管一个练习网站。我已经构建了一个简单的 JS 幻灯片，但幻灯片中的图像未显示。当我使用 Atom live 服务器显示网站时，图像和幻灯片工作正常。使用 github 页面时，我检查了事件幻灯片，它在图像数组中移动得很好，因为我可以看到 src 属性改变了它应该的方式，所以我知道代码正在正确地循环数组。我不确定出了什么问题。

相关的 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();

我还检查了文件名的所有拼写和大写字母。一切都检查完毕。就像我说的，当我使用 Atom 实时服务器时，一切正常。

更新https://jtc10.github.io/Arcadia-Restaurant/

这是该页面的链接。点击“预订”链接。幻灯片位于该页面上。

Answer 1

这很可能是解决本地服务器和实时服务器之间的相对路径的问题。

带有相对路径的请求都返回404 Not Found:

我更喜欢使用根目录的完整路径。这消除了这种情况的歧义。

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