图像未显示在 github 页面上答案

【问题标题】：Images aren't displaying on github pages图像未显示在 github 页面上
【发布时间】：2018-10-03 21:55:35
【问题描述】：

我正在使用 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/

这是该页面的链接。点击“预订”链接。幻灯片在那个页面上。

【问题讨论】：

如果你能给我们一个行为不端的 github 页面的链接，这可能会有所帮助。这可能与资源路径有关。

标签： javascript image github

【解决方案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',
];

【讨论】：

【解决方案2】：

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

【讨论】：