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

#1

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

0 Likes

#2

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

0 Likes

#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;
}

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

0 Likes

#4

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

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

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

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

#5

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

0 Likes

#6

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

О, еще такая штука бывает. Мета тег базового урла для ресурсов с относительными путями. У тебя на странице есть такой? https://www.w3schools.com/tags/tag_base.asp.

1 Like

#7

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

0 Likes