Проблема со слайдером на js?

Question

[annaumof]

Вечер всем добрый!
Прошу строго не судить, ибо только начинаю свой путь в web.
Проблема:
Сделал такой слайдер на js:

let buttonOne = document.querySelector('#control_1');
let buttonTwo = document.querySelector('#control_2');
let buttonThree = document.querySelector('#control_3');

let headerBackground = document.querySelector('.header')


buttonOne.onclick = function() {
  buttonOne.classList.add('header-control__active');
  headerBackground.style.backgroundImage = 'url(../img/header/ocean.jpg)';
  buttonTwo.classList.remove('header-control__active');
  buttonThree.classList.remove('header-control__active');
}

buttonTwo.onclick = function() {
  buttonTwo.classList.add('header-control__active');
  headerBackground.style.backgroundImage = 'url(../img/header/girl.jpg)';
  buttonOne.classList.remove('header-control__active');
  buttonThree.classList.remove('header-control__active');
}

buttonThree.onclick = function() {
  buttonThree.classList.add('header-control__active');
  headerBackground.style.backgroundImage = 'url(../img/header/child.jpg)';
  buttonOne.classList.remove('header-control__active');
  buttonTwo.classList.remove('header-control__active');
}

На live server(плагин VScode) все работает.
Если просто из папочки открыть html-файл, после клика на кнопку переключения слайдера, фоновое изображение пропадает.
Собственно вопрос: Почему?

Благодарю за внимание.

Comments

[Дмитрий Беляев]

3.8

Answer 1

[Ankhena]

Хрустальный шарик говорит, это потому что файл html находится на одном уровне с папкой img.
А в коде вы пишете, что из папки в которой лежит html нужно выйти на уровень наверх и уже там поискать папку img. А её там нет.
На локалхосте такой проблемы нет, потому что даже если написать ../../../../../img/ то выше localhost не прыгнет.

Значит, нужно исправить пути.

Comments

[annaumof]

Благодарю

[annaumof]

Ankhena, отметил, еще раз спасибо