Проблема с отображением картинок на сайте

Вопрос-ответ Остальное
1

Всем привет, недавно начал изучать front-end и столкнулся со следующей проблемой. Писал сайт с помощью GULP, собрал проект, но проблема в том, что запуская сайт на Денвере всё прекрасно работает, однако запуская просто “index.html” стили отображаются, а вот абсолютно все картинки - нет. Надеюсь на вашу помощь! :)

2

Покажи код из index.html как вставляется картинка. Вероятно дело в абсолютных путях, который работают если открывать сайт через веб сервер и не работают если открывать сайт как файл с файловой системы.

3 
**1**
<div class="logo">
   <a href="#"><img src="img/logo.png" alt="logo"></a>
</div> 

**2**
<div class="productsrow__block">
 <img src="img/catalog/look1.jpg" alt="product"> 
 <form action="#" class="productsrow__form">
   <input type="submit" value="500$" class="productsrow__button1"
 </form>
</div>

**3**
.main-block {
   background: url(img/main-background.jpg) center top/cover no-repeat;
}

Папка выглядит следующим образом :

1
1.png625×589 24 KB

4

Дело не в разметке или файловой структуре. Тот код который ты показал должен работать.

Может какие настройки “выкручены”, или какой плагин в браузере работает, или ,там, локальный прокси сервер? Попробуй открыть страницу в инкогнито без плагинов. Или попробуй открыть страницу в другом браузере.

Еще покажи вкладку “network” на странице с проблемными изображениями.

  1. Открой страницу
  2. Открой вкладку
  3. Перезагрузки страницу (таким образом обновиться содержимое вкладки)
  4. Кинь скришнот вкладки
5

Я понял в чем проблема. Когда копирую URL непрогруженной картинки выходит : “file:///D:/img/logo.png” . Хотя должно получаться : “file:///D:/prnkidshop_2/dist/img/logo.png”. Теперь не понимаю как решить эту проблему…

6

Звучит так будто указываются абсолютные пути картинок (начинающиеся с /
). <img src="/img/logo.png" />. Но судя по тому коду что ты кинул это не так (если только ты кинул не тот код который открывается в браузере когда наблюдаешь что картинка грузится по file:///D:/img/logo.png.

О, еще такая штука бывает. Мета тег базового урла для ресурсов с относительными путями. У тебя на странице есть такой? HTML base tag.

1 лайк
7

Вот черт… Точно! Указывались абсолютные пути, когда отправлял вам код - убрал слэши понимая это, но почему-то не сохранил и не протестил. Глупая ситуация, тем не менее… Спасибо вам огромнейшее за потраченное время и помощь! :)