Почему не видно картинок?

Question

[Юрий Иванов]

Пушу вот такой код на github pages и он не видит мои картинки, пробовал
../images
/images
images
подскажите пожалуйста как поправить

startGameBtn.addEventListener('click', startGame);
function startGame() {
  btnclickAudio.play();
  lifes = 3;
  gamefield.insertAdjacentHTML("afterbegin",
        `<img
          draggable="false"
          src="images/heart.png"
          alt=""
          class="game-field__heart game-field__heart1"
        />
        <img
          draggable="false"
          src="images/heart.png"
          alt=""
          class="game-field__heart game-field__heart2"
        />
        <img
          draggable="false"
          src="images/heart.png"
          alt=""
          class="game-field__heart game-field__heart3"
        />`);
  startGameBtn.style.display = 'none';
  gameEND();
  setTimeout(() => {
  createEnemy();
  }, 1000);
  IntervalCreateEnemy();
}

Comments

[ThunderCat]

Элементы выводятся в дом?
Картинки тянутся в нетворке?

[Ankhena]

Давайте переформулируем: какие аргументы за то, что их должно быть видно?
Аргументом могло бы быть наличие папки images в dist. И фалов в ней.
Но я не вижу.
Впрочем ни одного heart.png тоже не вижу.

[Юрий Иванов]

ThunderCat,
Да, картинки отрисовываются в дом

[Юрий Иванов]

Ankhena, Ну проблема в том, что я немного плохо понимаю принципы работы со вставкой картинок из js/css. Картинки которые находятся в этой же папке, при сборке проектов из файла css с url(/images/......)подтягиваются, а с js файла картинки с таким же путем не отрисовываются

[Ankhena]

Юрий Иванов, вы же весь кусок html куда вставляете-то? Вот относительно того места и должны быть написаны пути.

В любом случае рецепт абсолютно простой: открываете инструменты разработчика, смотрите путь по которому браузер ищет файл. Сравниваете с тем, где файл лежит на самом деле. Вносите правки.

[Юрий Иванов]

Ankhena,точно, я все понял, думаю сейчас получится исправить, спасибо за помощь, вы самый добрый юзер хабра)

[Антон Горецкий]

Есть еще один вариант - скопируйте папку images в папку dist, чтобы она рядом с папкой assets была. Тогда путь ../images станет валидным и картинки будут найдены :)

[Юрий Иванов]

Антон Горецкий, я так и сделал, сейчас гитхаб обновится и посмотрим что выйдет)

[Юрий Иванов]

Антон Горецкий, Ура, мы победили, это сработало:)

Answer 1

[Юрий Иванов]

если кто-то столкнется со схожей проблемой

Answer 2

[Антон Горецкий]

Если публикуете папку dist, то и покажите ее содержимое. Откуда я могу знать как там собирается проект? Все пути должны соответствовать структуре публикуемого пакета.

Comments

[Юрий Иванов]

Действительно, что-то я не подумал, извиняюсь, поправил. Спасибо за замечание

[Антон Горецкий]

Юрий Иванов, Ну вот видите - никакого images в публикуемом пакете нет. По идее, во время сборки все пути должны выправляться (если правильно настроен конфиг). Попробуйте в пути к картинкам не писать images, а сразу название картинки. Но сомневаюсь, что это поможет - в именах картинок приписывается кеш, а его заранее не узнаешь. Так что лучше разбирайтесь со своим сборщиком или вынесите в css эти моменты.