Этот вопрос закрыт для ответов, так как повторяет вопрос Ошибка 404 для шрифта и для background-image на github pages. Почему?
@mikilikala
На фронте

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

5fbab43307141571541155.png

И так! Я понимаю, что если прописать для background-image путь такой - "../img/image.png", то картинка будет отображаться если я открою страницу на локальном хосте, но если закину на гит или на хостинг, то не будет. А если написать "img/image.png", то будет всё наоборот. На локальном не отображается, а на гит или на хостинге всё ок! Как быть в таком случае? Качать VSCode и ставить на него плагин live server?
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
DanArst
@DanArst
Э, Ойboy!
Попробую объяснить на пальцах по вашему примеру.
Ваша страница - это файл 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" - где ../ означает в папке на уровень выше
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы