Изображения не отображаются на страницах 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 Live, все работает нормально.

ОБНОВЛЕНИЕ 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, который не существует, удалить ../ из пути к изображению.