Xaski
@Xaski
Учусь в фронтенд

Почему не отображается png без live server?

В vscode с помощью плагина live server работаю с png. Во вкладке открытой с помощью плагина png отображается как надо, а если просто открыть html файл, то просто alt, на хостинге тоже ничего не отображается. Остальные форматы отображаются без проблем.

<img class="light" src="/img/lighwerwerwerwert.png" alt="Светильники">
Пример img

Некоторые изображения накладываются друг на друга слоями с помощью: z-index: х; position: absolute; в частности 2 png + 2 svg. Работает только 1 png + 2 svg вторая png не хочет.
Что делать, как решить?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
@Steppp
<img class="light" src="./img/lighwerwerwerwert.png" alt="Светильники">
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@strelok011
Немного дополню предыдущего комментатора:
1. если ссылка начинается с "/" - это значит "начать с корня сайта (или диска). например ссылка вида /images/image.png будет искаться либо по адресу site.ru/images/image.png, а локально - относительно того раздела на винте (c:/images/image.png), где находится файл html. При этом не будет браться в расчет путь к каталогу, где находится html. Ссылка получится "абсолютной".
2. если ссылка будет без дроби вначале вида "images/image.png" - путь к изображению будет строиться от места нахождения файла html. Например: файл лежит в каталоге "c:/work/site/index.html", тогда рядом с ним должен находиться каталог images с картинкой, и браузер будет открывать картинку по следующему пути: "c:/work/site/images/image.png".
Ссылка без дроби вначале сработает аналогично "./images..."
точка с дробью принудительно указывает на текущий каталог, в котором лежит файл html. Ссылка получится "относительной" (т.е. будет строиться относительно местонахождения html файла)

live в редакторе позволяет имитировать работу на сайте и подставляет корневой каталог от местонахождения файла html. Если будет более сложная структура - и live может не помочь, если будете так ссылки выстраивать. Для локальной верстки используйте только относительные ссылки. При необходимости обратиться в соседний по уровню вложенности каталог ссылка может начинаться с "../", что укажет браузеру необходимость подняться на один уровень вложенности выше.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы