Як піднятися на рівень у src шляху URL-адреси в HTML?

101

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

наприклад в background-image: url('/images/bg.png');

html css relative-path

— aateeque
джерело

184

Використовуйте ..для вказівки батьківського каталогу:

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

— самотній день
джерело

Я читав це і в інших місцях, але це не працює! (принаймні в Chrome)

— aateeque

27

Це робить. Однак зауважте, що місцеположення відносно місця розташування файлу CSS, а не документа, в якому вбудований файл CSS.

— ThiefMaster

1

@TentistMaster Це має бути, якщо ми використовуємо лише вбудований CSS

— 1000Gbps

57

Ось усе, що вам потрібно знати про відносні шляхи до файлів:

Починаючи з / повернення до кореневого каталогу і починається там
Починаючи з ../ переміщення одного каталогу назад і починається там
Починаючи з ../../ переміщення двох каталогів назад і починається там (і так далі ...)
Щоб рухатися вперед , просто почніть з першого підкаталога і продовжуйте рухатися вперед.

Натисніть тут, щоб отримати детальну інформацію!

— С.Акрувала
джерело

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 і вона спрацювала.

— A.Tressos
джерело

0

Якщо ви зберігаєте таблиці стилів / зображення у папці, щоб їх могли використовувати декілька веб-сайтів, або ви хочете повторно використовувати ті самі файли на іншому сайті на тому ж сервері, я виявив, що мій браузер / Apache не дозволяє мені переходити до будь-яку батьківську папку над кореневою URL-адресою веб-сайту. Це здається очевидним з міркувань безпеки - не можна мати можливість переглядати на сервері будь-яке місце, крім зазначених веб-папок.

Напр. не працює: www.mywebsite.com/../images

Як вирішення, я використовую Посилання:

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

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

— Ліндерт
джерело