Jak przejść poziom wyżej w ścieżce src adresu URL w HTML?

103

Przechowuję arkusze stylów w {root} / styles, a obrazy w {root} / images na stronie internetowej. Jak podać ścieżkę w arkuszach stylów, aby przejść do katalogu obrazów dla określonych obrazów?

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

html css relative-path

— aateeque
źródło

186

Służy ..do wskazania katalogu nadrzędnego:

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

— samotny dzień
źródło

Czytałem to też gdzie indziej - ale to nie działa! (przynajmniej w Chrome)

— aateeque

27

To robi. Należy jednak pamiętać, że lokalizacja jest zależna od lokalizacji pliku CSS, a nie dokumentu zawierającego plik CSS.

— ThiefMaster

1

@ThiefMaster Powinno być, jeśli używamy tylko wbudowanego CSS

— 1000Gbps

59

Oto wszystko, co musisz wiedzieć o względnych ścieżkach plików:

Zaczynając od / powrotu do katalogu głównego i tam zaczyna
Rozpoczynanie od ../ powoduje przejście o jeden katalog wstecz i rozpoczęcie w tym miejscu
Rozpoczynając od ../../ przenosi dwa katalogi wstecz i zaczyna tam (i tak dalej ...)
Aby przejść dalej , po prostu zacznij od pierwszego podkatalogu i idź dalej.

Kliknij tutaj, aby uzyskać więcej informacji!

— S.Akruwala
źródło

52

Zastosowanie ../:

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

Możesz tego używać tak często, jak chcesz, np. ../../images/Lub nawet na różnych pozycjach, np. ../images/../images/../images/(Tak samo jak ../images/oczywiście)

— ThiefMaster
źródło

9

W przeglądarce Chrome, gdy ładujesz witrynę z jakiegoś serwera HTTP, działają zarówno ścieżki bezwzględne (np. /images/sth.png), Jak i ścieżki względne do jakiegoś katalogu wyższego poziomu (np. ../images/sth.png).

Ale!

Kiedy ładujesz (w Chrome!) Dokument HTML z lokalnego systemu plików, nie możesz uzyskać dostępu do katalogów powyżej bieżącego katalogu. Oznacza to, że nie możesz uzyskać dostępu ../something/something.sthi zmiana ścieżki względnej na bezwzględną lub nic innego nie pomoże.

— jaboja
źródło

1

Po ponownym sprawdzeniu mogę zgłosić, że ścieżki względne lokalnego systemu plików za pomocą ../działają dobrze - lub przynajmniej działają dobrze w tym konkretnym przypadku!

— Aateeque

1

To działa na Linux i Windows, a nie na Mac (moje doświadczenie)

— gabn88

Linki nie liczą się tutaj, ponieważ nie ma dla nich tego samego sprawdzania pochodzenia. Również ta odpowiedź ma 6 lat, więc przeglądarki mogły się bardzo zmienić.

— jaboja

1

Potwierdzam tylko dla każdego, kto przegląda odpowiedź

— Ajay,

0

Przypuśćmy, że masz następującą strukturę plików:

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

W CSS możesz uzyskać dostęp image1, na przykład, używając linii ../images/image1.png.

UWAGA : Jeśli używasz przeglądarki Chrome, może ona nie działać i pojawi się komunikat o błędzie informujący, że nie można znaleźć pliku. Miałem ten sam problem, więc właśnie usunąłem całą historię pamięci podręcznej z chrome i zadziałało.

— A. Tressos
źródło

0

Jeśli przechowujesz arkusze stylów / obrazy w folderze, aby wiele witryn mogło ich używać, lub chcesz ponownie użyć tych samych plików w innej witrynie na tym samym serwerze, stwierdziłem, że moja przeglądarka / Apache nie pozwala mi przejść do dowolny folder nadrzędny powyżej głównego adresu URL witryny. Wydaje się to oczywiste ze względów bezpieczeństwa - nie powinno być możliwości przeglądania serwera w żadnym innym miejscu niż określone foldery internetowe.

Na przykład. nie działa: www.mywebsite.com/../images

Aby obejść ten problem, używam linków symbolicznych:

Przejdź do katalogu www.mywebsite.com Uruchom polecenie ln -s ../images images

Teraz www.mywebsite.com/images będzie wskazywać www.mywebsite.com/../images

— Leendert
źródło