Jak prawidłowo odwoływać się do zasobów lokalnych w HTML?

Okazuje się, że odwoływanie się do zasobów lokalnych może być punktem zaczepienia dla niektórych. Szukam kanonicznej odpowiedzi na odwoływanie się do zasobów lokalnych i ich znaczenia.Jak prawidłowo odwoływać się do zasobów lokalnych w HTML?

Weź te przykłady, jaka jest różnica między tymi ścieżkami referencyjnymi?

<img src="myfile.png" /> (nie ukośnika)
<img src="/myfile.png" /> (z ukośnika)
<img src="folder/myfile.png" /> (nie ukośnika/w podkatalogu)
<img src="/folder/myfile.png" /> (z ukośnika/w podkatalogu)
<img src="../folder/myfile.png" /> (z kropkami i wiodącym ukośnikiem/w podkatalogu)

Źródło

2013-01-23 Chase Florell

We wszystkich przypadkach są to ścieżki względne do katalogu bazowego dokumentu HTML, który jest adres URL, z którego dokument został załadowany. Jeśli dokument został załadowany z adresu URL strony internetowej, wszystkie adresy URL są rozwiązywane w odniesieniu do tego hosta. Ścieżki bezwzględne są rozwiązywane względem katalogu głównego witryny, względne adresy URL odnoszą się do ścieżki strony, na której się pojawiają. Adresy URL będą przetwarzane na zasoby lokalne tylko wtedy, gdy strona została załadowana z lokalnego pliku HTML (zwykle wyrażona jako adres: // ... URL). –

@JimGarrison Yep, to nie bierze pod uwagę aktu ładowania plików na komputerze lokalnym bez serwera WWW. –

Wiodący ukośnik informuje przeglądarkę, aby rozpocząć od katalogu głównego.
Jeśli nie masz wiodącego ukośnika, odwołujesz się do bieżącego katalogu.
Jeśli dodasz dwie kropki przed wiodącym ukośnikiem, oznacza to, że odwołujesz się do elementu nadrzędnego bieżącego katalogu.

podjąć następujące struktury folderów

demo folder structure

Wskazówka:

zaznaczenie ROOT jest zielony,
drugi zaznaczenia jest pomarańczowy,
trzeci zaznaczenia jest fioletowy,
zaznaczenie dalej jest żółty

Teraz w pliku index.html.en będziemy chcieli umieścić następującą znaczników

<p> 
    <span>src="check_mark.png"</span> 
    <img src="check_mark.png" /> 
    <span>I'm purple because I'm referenced from this current directory</span> 
</p> 

<p> 
    <span>src="/check_mark.png"</span> 
    <img src="/check_mark.png" /> 
    <span>I'm green because I'm referenced from the ROOT directory</span> 
</p> 

<p> 
    <span>src="subfolder/check_mark.png"</span> 
    <img src="subfolder/check_mark.png" /> 
    <span>I'm yellow because I'm referenced from the child of this current directory</span> 
</p> 

<p> 
    <span>src="/subfolder/check_mark.png"</span> 
    <img src="/subfolder/check_mark.png" /> 
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span> 
</p> 

<p> 
    <span>src="../subfolder/check_mark.png"</span> 
    <img src="../subfolder/check_mark.png" /> 
    <span>I'm purple because I'm referenced from the parent of this current directory</span> 
</p> 

<p> 
    <span>src="subfolder/subfolder/check_mark.png"</span> 
    <img src="subfolder/subfolder/check_mark.png" /> 
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span> 
</p> 

<p> 
    <span>src="/subfolder/subfolder/check_mark.png"</span> 
    <img src="/subfolder/subfolder/check_mark.png" /> 
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span> 
</p>

Teraz, jeśli załadować plik index.html.en znajduje się w drugim podfolderze
http://example.com/subfolder/subfolder/

To będzie Twój wynik

enter image description here

Źródło

2013-01-23 20:43:21

Jak prawidłowo odwoływać się do zasobów lokalnych w HTML?

Odpowiedz

Powiązane problemy