Как правильно прописать путь до картинки в css?
Есть следующая структура файлов и папок.
В firebug показывает, что css подключен, но сам файл с изображением не доступен. Как правильно прописать путь для файла tel-1.png чтобы он отобразился в файле index.html
Путь ../dist/img/tel-1.png не работает
- Вопрос задан более трёх лет назад
- 18649 просмотров
Комментировать
Решения вопроса 1
Помог ответ? Отметь решением.
../../dist/img/tel-1.png
Ответ написан более трёх лет назад
Нравится 2 6 комментариев
ayapergenov @ayapergenov Автор вопроса
ayapergenov: пожалуйста )) С новым годом вас!
ayapergenov: кстати simplyv тоже самое ответил
ayapergenov @ayapergenov Автор вопроса
Алексей Ярков: Благодарствую!
Gtsk415, на здоровье ))
Ответы на вопрос 2
путь к картинке должен быть не относительно страницы на которой будет отображаться, а относительно файла CSS.
скажем для страница лежит в корне, файл CSS в папке CSS, а картинка в IMAGES.
адрес в CSS будет background: url(../images/bg.png);
Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
смотря где картинка есль в той же папке то tel-1.png если нет то попробуй ./papka/tel-1.png
Ответ написан более трёх лет назад
ayapergenov @ayapergenov Автор вопроса
Отредактировал вопрос. Посмотрите по ссылке скриншот и мой вариант пути
вот посмотри тут https://css-tricks.com/quick-reminder-about-file-paths/
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- CSS
Как уточнить в CSS какой из значок редактировать?
- 1 подписчик
- 6 часов назад
- 47 просмотров
Как указать пути к файлам css, картинкок и других ресурсов?
Когда ставлю background то пишет мол картинка не найдена. Если Переместить картинку на уровень выше папки cgi-bin, то всё работает, но если создать папку параллельно cgi-bin, то опять не находит. Вопрос вот в чём: где хранить контент — яваскрипты, стили, картинки? В реальности папка recources выше папки cgi-bin, если переместить её в cgi-bin, то всё равно не пашет. Вот код:
#!/usr/bin/env python3 path = "" print("Content-type: text/html") print() print(""" Main Page """) Отслеживать
845 8 8 серебряных знаков 24 24 бронзовых знака
задан 25 ноя 2017 в 10:11
silantyev.daniil silantyev.daniil
9 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов.
- Файлы располагаются в одной папке
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.
- Файлы размещаются в разных папках.
Когда исходный документ хранится в одной папке, а ссылаемый в корне директорий, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.
Две точки в данном случае означают выйти из текущей папки на уровень выше.
- Файлы размещаются в разных папках.
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
Вам нужно указать правильно путь к файлу! А хранить данный контент нужно в отдельных папках
Вам нужно в каталоге создать разные папки с именем img, js, css, и т.д.
/директория вашего сайта или что у вас там/img/bg.jpg Относительный путь к файлу
Многим новичкам трудно разобраться, как правильно строить относительный путь к файлу. Сегодня, я постараюсь разобрать все нюансы связанные с этим.
Если вы уже знакомы с данной темой, то можете закрыть вкладку и не читать
Начнем. Для начала, посмотрим как выглядит абсолютный путь к файлу на сайте:
- https:// — протокол подключения к сайту
- www.mysite.ru — домен
- source, img — папки
- main.png — нужный нам файл
Выглядит вроде просто. Но на практике, никто не указывает абсолютный путь к файлу при верстке страниц. Для этого всегда используют относительный.
Для правильного построения относительного пути, нужно разобраться с его синтаксисом:
- Знак точка “ . ” — указывает на текущую (корень) папку, где находится файл
- Две точки “ .. ” — указывает на родителя текущей папки, где находится файл
- Слэш “ / ” — показывает какую следующую папку/файл будет выбирать
Пока просто запомните эту информацию. Если во время прочтения, забудете, вернитесь к этому списку и вспомните.
Представим что у вас есть вот такая структура проекта. (папки — прямоугольники, файлы — названия с полоской)
Теперь напишем простой относительный путь до картинки first.png . Для этого, в файле index.html нужно прописать вот такую строчку:
Все работает. И можно было бы закончить, но нет ��.
Такой адрес показывает, что поиск файла будет происходить относительно папки, где расположен index.html .
Если бы, вы в начале пути указали / или C:// , это являлось бы абсолютным путем. Слэш в начале “ / ” (для Linux систем) или “ C:// ” (для windows) в начале показывает, что поиск файла будет происходит начиная от корня вашего диска (файловой системы).
Как реально выглядит расположение нашего проекта?
Корень проекта, тоже является папкой, поэтому не забывайте об этом.
Алгоритм работы поиска файла
Прописывая вот такой путь до файла:
Браузер начинает его искать вот таких образом:
- Подключение картинки написано в файле index.html. Смотрит где находится файл index.html. Находит эту папку. Это корень проекта
- В корне проекта ищет папку source. Если нашел, все ок, идем дальше
- В папке source ищет папку img
- В папке img находит файл first.png
Вот так происходит поиск файла по относительному пути. Если на какую то папку он не сможет найти, то картинка не будет показана и браузер выдаст ошибку в консоли.
Точка
Давайте теперь рассмотрим вариант посложнее.
В начале прописали ./ . Что же это значит? Я уже писал об этом ранее:
- Точка указывает на текущую папку, где находиться файл index.html. Т.е. на корень проекта
- Слэш после точки указывает, что внутри корня проекта будет искать папку, которая находиться после него. Т.е. source
В итоге получилась равнозначная запись предыдущей. Алгоритм поиска будет ровно такой же, просто предыдущая запись является сокращенной и более приятной глазу. Почти всегда используют первую запись пути.
Две точки
Но это еще не все. Давайте немного поменяем проект и добавим еще одну папку и страницу:
У нас появились новая папка about, в корне проекта, а в ней страница home.html
И если мы захотим использовать ту же запись для подключения картинки на странице home.html, то она не сработает. Потому, что поиск будет теперь происходить относительно папки about, а не корня проекта, как ранее.
Что же делать? На помощь нам приходят две точки “ .. ”.
Две точки позволяют, так сказать, провалиться на уровень выше. Т.е. поиск будет происходить не от текущей папки home, а от корня проекта.
- Подключение картинки написано в файле home.html. Смотрит где находится файл home.html. Находит эту папку. Это папка about
- Дальше смотрит кто является родителем папки about. Им является корень проекта
- В корне проекта ищет папку source. Если нашел, все ок, идем дальше
- В папке source ищет папку img
- В папке img находит файл first.png
Если, например, внутри папки home была еще одна папка, и в ней была бы еще одна страница, то путь до файла first.png, внутри этой страницы, выглядел бы вот так:
Теперь все
Надеюсь теперь стало понятно, в чем разница между абсолютным путем и относительным, в чем разница между одной и двумя точками и зачем они нужны.
Если у вас еще остались вопросы, можете задать их в моем telegram чате. Так же я занимаюсь обучением программированию в своей telegram группе.
Относительный и абсолютный путь к файлу
В данном уроке мы объясним новичкам, что такое абсолютный и относительный путь к файлу, а также в каком случае какой из них лучше использовать. Если вы уже знакомы с данной темой, вы можете переходить к следующему уроку.
Итак, начнем с определения самого термина «путь»:
Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.
Википедия
Если говорить о сайтах, то путь — это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.
Что такое абсолютный путь к файлу
Абсолютный адрес ссылки на файл включает в себя протокол (например, http:// ), имя сайта в Сети, подкаталог (или несколько подкаталогов), название файла. Пример того, как выглядит абсолютный URL:
Абсолютный путь можно использовать в CSS. Например, чтобы задать рисунок в качестве фона, вы можете взять абсолютный URL к файлу с изображением И указать его в таблице стилей:
background-image: url(http://www.example.com/img/bg.png);
Абсолютная ссылка всегда будет указывать на одно и то же место, независимо от того, где расположен содержащий ее документ (в нашем случае таблица стилей). Чего не скажешь об относительной ссылке.
Что такое относительный путь к файлу
С относительным адресом всё намного интереснее — он может отсчитываться как от корня сайта, так и от текущего документа. Корневой относительный путь — это путь, который указывает на расположение файла относительно корневого каталога сайта. В этом случае адрес не содержит ни протокола, ни имени домена, и начинается со знака слэша / , который указывает на корневую папку. Выглядит этот адрес так:
background-image: url(/img/bg.png);
Как легко определить корневой относительный адрес? Просто возьмите абсолютную ссылку и уберите из нее протокол и название домена, оставив слэш и все символы, которые идут дальше.
Относительный путь к файлу от документа — это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан. Так, когда относительная ссылка указывается в таблице стилей, она рассчитывает путь к файлу, отталкиваясь от таблицы стилей, а не от текущей веб-страницы либо корневой папки. Приведем несколько примеров.
Пример I
Если наша таблица стилей style.css и файл с фоновым рисунком bg.png находятся в одной папке (не обязательно корневой), то относительный путь от таблицы до рисунка будет выглядеть так:
background-image: url(bg.png); /* вы просто пишете имя файла */
Пример II
Если таблица стилей находится в корне, а рисунок — в папке img , относительная ссылка будет таковой:
background-image: url(img/bg.png); /* слэш в начале не нужен */
Пример III
Если таблица стилей находится в папке, а рисунок соседствует с этой папкой, то относительный путь будет таким:
background-image: url(../bg.png); /* две точки — подняться на один уровень */
Пример IV
Если таблица стилей находится в двух папках, а рисунок соседствует с первой папкой, то относительный путь будет следующий:
background-image: url(../../bg.png); /* поднимаемся на два уровня */
Две точки и слэш в начале относительного пути означают подъем на один уровень вверх. В зависимости от количества уровней (каталогов), на которые нужно подняться, необходимо прописать нужное количество точек со слэшом. К примеру, если таблица стилей лежит не в двух, а в четырех папках, запись, соответственно, будет следующей:
background-image: url(../../../../bg.png);
В том случае, когда рисунок спрятан в папку img , а таблица стилей — в папку css , вам понадобится выйти из папки css и зайти в папку img . Вот так:
background-image: url(../img/bg.png);
Если папок несколько, необходимо также прописать их. Изменим предыдущий пример: представим, что в папке img есть еще одна папка backgrounds , в которой лежит наш рисунок. Относительный путь будет таким:
background-image: url(../img/backgrounds/bg.png);
Какой путь лучше использовать
Абсолютный адрес ссылки понадобится использовать, если файл, на который вы ссылаетесь, находится на другом сайте. В пределах одного сайта абсолютный путь практически не используется (хоть он и будет работать). Это связано с несколькими моментами: во-первых, такие ссылки могут быть весьма громоздкими, а во-вторых, если имя домена изменится, то возникнет проблема — все ссылки будут вести на старый домен, что может повлечь за собой множество ошибок и битых ссылок.
Корневой относительный путь будет работать на веб-сервере, но он бесполезен при разработке на локальном компьютере. Но преимущество этого типа ссылок в том, что вы можете перемещать свою таблицу стилей в любую папку сайта и не бояться, что адреса фоновых изображений станут нерабочими.
Относительный путь от документа — наилучший вариант при веб-разработке на локальной машине без использования сервера. В браузере вы сможете нормально просматривать веб-страницы, хранящиеся на вашем компьютере, и адреса файлов будут работать. Они будут работать и на живом сайте, но с одним условием — если не перемещать таблицу стилей в другое место (иначе придется корректировать пути).
Попробуйте потренироваться в использовании относительных путей как на локальном компьютере, так и на веб-сервере. Понимание того, как это работает, непременно пригодится вам в любом проекте.
Далее в учебнике: свойство background-repeat — управление повтором фонового изображения.