Как быть с относительными путями когда заливаешь сайт на хостинг и когда открываешь html файл в браузере?

Question

[Максим Иванов]

И так! Я понимаю, что если прописать для background-image путь такой - "../img/image.png", то картинка будет отображаться если я открою страницу на локальном хосте, но если закину на гит или на хостинг, то не будет. А если написать "img/image.png", то будет всё наоборот. На локальном не отображается, а на гит или на хостинге всё ок! Как быть в таком случае? Качать VSCode и ставить на него плагин live server?

Comments

[Антон Литвиненко]

Да вы похоже не читаете что я пишу. Ваши два пути это два Разных пути. Один из них ищет на том же уровне папку img и в ней файл. Второй, тот который с точками, поднимается на уровень выше и потом на том уровне ищет папку img и в ней уже файл. Разные уровни! Во втором случае у вас там нет папки img!

[Ankhena]

Если вы пишете путь до картинки в файле html (или стили пишете в теге head), то
img/image.png
Если в файле style.css, который лежит в папке css, то так:
../img/image.png
Эти 2 варианта будут работать не важно как и где вы открываете сайт до тех пор, пока не нарушится структура файлов.

Также вы можете писать путь от корня сайта, начиная со слеша, но нужно хорошо знать где он у вас. /img/image.png

Answer 1

[Danny Arty]

Попробую объяснить на пальцах по вашему примеру.
Ваша страница - это файл index.html и он находится в корневой папке, чтобы было понятнее будем называть ее папкой 1-го уровня.
Картинки у вас лежат в папке img, т.е. внутри корневой и это уже будет 2-ой уровень. Также и с файлами стилей, они лежат в папке css, также внутри корневой и соответственно тоже 2-ой уровень.

Так вот когда вы вставляете картинку в код index.html, вы пишите, грубо говоря, путь от index.html к папке, в которой лежит картинка, т.е у вас будет что-то наподобие <img src="img/image.jpg"> - вы пишите путь от папки 1-го уровня к папке 2-го.
А когда вы пишите url для картинки в файле стилей, то вы пишите путь от файла style.css к папке, в которой лежит картинка, но они обе 2-го уровня, значит надо подняться на 1-ый и потом уже переходить к папке, поэтому url в коде будет иметь вид "../img/image.jpg" - где ../ означает в папке на уровень выше