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

Odpowiedzi:

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