Как повысить уровень src-пути URL-адреса в HTML?

103

Я храню таблицы стилей в {root} / styles, а изображения в {root} / images для веб-сайта. Как указать путь в таблицах стилей для поиска указанных изображений в каталоге изображений?

например, в background-image: url('/images/bg.png');

html css relative-path атеке
источник

Ответы:

186

Используйте ..для указания родительского каталога:

background-image: url('../images/bg.png');
одинокий день
источник
Я читал это в другом месте, но это не работает! (по крайней мере, в Chrome)
aateeque
27
Оно делает. Однако обратите внимание, что это расположение относительно расположения файла CSS, а не документа, в который вставлен файл CSS.
ThiefMaster
1
@ThiefMaster Так и должно быть, если мы используем только встроенный CSS
1000 Гбит / с 02
58

Вот все, что вам нужно знать об относительных путях к файлам:

  • Начиная с, / возвращается в корневой каталог и начинается там

  • Начиная с ../ перемещает на один каталог назад и начинается там

  • Начиная с ../../ перемещает два каталога назад и начинается там (и так далее ...)

  • Чтобы двигаться вперед , просто начните с первого подкаталога и продолжайте двигаться вперед.

Щелкните здесь, чтобы узнать больше!

С.Акрувала
источник
52

Использование ../:

background-image: url('../images/bg.png');

Вы можете использовать это так часто, как хотите, например, ../../images/или даже в разных позициях, например ../images/../images/../images/(как, ../images/конечно)

ThiefMaster
источник
9

В Chrome, когда вы загружаете веб-сайт с некоторого HTTP-сервера, работают как абсолютные пути (например /images/sth.png), так и относительные пути к некоторому каталогу верхнего уровня (например ../images/sth.png).

Но!

Когда вы загружаете (в Chrome!) HTML-документ из локальной файловой системы, вы не можете получить доступ к каталогам над текущим каталогом. Т.е. вы не можете получить доступ ../something/something.sthи изменить относительный путь на абсолютный, иначе ничего не поможет.

Jaboja
источник
1
После повторной проверки я могу сообщить, что относительные пути локальной файловой системы с использованием ../действительно работают нормально - или, по крайней мере, работают нормально в этом конкретном случае!
aateeque
1
Он работает на Linux и Windows, а не на Mac (мой опыт)
gabn88
Ссылки здесь не учитываются, так как для них нет проверки происхождения. Также этому ответу 6 лет, поэтому браузеры, возможно, сильно изменились.
jaboja
1
Я просто подтверждаю для всех, кто просматривает ответ
Аджай
0

Предположим, у вас есть следующая файловая структура:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

В CSS вы можете получить доступ image1, например, с помощью строки ../images/image1.png.

ПРИМЕЧАНИЕ . Если вы используете Chrome, он может не работать, и вы получите сообщение об ошибке, что файл не может быть найден. У меня была такая же проблема, поэтому я просто удалил всю историю кеша из Chrome, и это сработало.

А. Трессос
источник
0

Если вы храните таблицы стилей / изображения в папке, чтобы их могли использовать несколько веб-сайтов, или вы хотите повторно использовать одни и те же файлы на другом сайте на том же сервере, я обнаружил, что мой браузер / Apache не позволяет мне перейти на любая родительская папка над корневым URL-адресом веб-сайта. Это кажется очевидным из соображений безопасности - нельзя просматривать на сервере любое место, кроме указанных веб-папок.

Например. не работает: www.mywebsite.com/../images

В качестве обходного пути я использую символические ссылки:

Перейдите в каталог www.mywebsite.com Выполните команду ln -s ../images images.

Теперь www.mywebsite.com/images будет указывать на www.mywebsite.com/../images

Leendert
источник