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

Question

[Иван Шашков]

В 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 не хочет.
Что делать, как решить?

Comments

[SagePtr]

99% что неправильно указан путь. Если просто открывать html-файл, то так будет в 100% случаев, потому как путь указан от корня, а браузер явно не будет разрешать рандомным открытым локально страницам рыться в корне жёсткого диска.

[Иван Шашков]

SagePtr, точно нет, я уже и относительно и абсолютно задавал, она именно что не прогружается, заместо нее либо значек, что картинка не загрузилась, либо альт.
Плюс, через лайв сервер то все работает, а просто при открытии html нет, как так вообще?

[SagePtr]

Иван Шашков, вкладка Network в инструментах разработчика в браузере в помощь

[Иван Шашков]

SagePtr, Два дня сидел значит думал в чем проблема, сейчас просто перезагрузил vscode, заново прописал путь через плагин Path Intellisense и все заработало, какого черта, путь один в один, ничего не поменялось, но все заработало, господи.

Answer 1

[Steppp]

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

Comments

[Иван Шашков]

А в чем смысл точки?

[Steppp]

Иван Шашков,
src="/img/lighwerwerwerwert.png" (фал лежит в той же папке)
src="./img/lighwerwerwerwert.png" (фал лежит в той же папке. такая запись иногда требуется в некоторых юникс системах)
когда с точкой, нет проблем с путями и на маке и на линуксе! Я раньше натыкался на это, долго ломал голову почему не работают и шрифты и фотографии! И теперь всегда пишу с точкой, и все нормально работает, как и на разных системах так и без лайвсервера

Answer 2

[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 может не помочь, если будете так ссылки выстраивать. Для локальной верстки используйте только относительные ссылки. При необходимости обратиться в соседний по уровню вложенности каталог ссылка может начинаться с "../", что укажет браузеру необходимость подняться на один уровень вложенности выше.

Comments

[Иван Шашков]

Ох етить, спасибо за такой развернутый ответ.