图像未显示在github页面上

Question

我正在使用github页面托管实践网站。我建立了一个简单的JS幻灯片，幻灯片中的图像没有显示。当我使用Atom实时服务器显示站点时，图像和幻灯片可以正常工作。当使用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：

我更喜欢使用root的完整路径。这消除了歧义。

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，从图像路径中删除../。