Come fare correttamente riferimento alle risorse locali in HTML?

Come risulta, la referenziazione delle risorse locali può essere un punto debole per alcuni. Sto cercando una risposta canonica al riferimento alle risorse locali e a cosa significano.Come fare correttamente riferimento alle risorse locali in HTML?

Prendi questi esempi, qual è la differenza tra questi percorsi di riferimento?

<img src="myfile.png" /> (senza barra di primo piano)
<img src="/myfile.png" /> (con barra diagonale)
<img src="folder/myfile.png" /> (senza slash iniziale/in sottocartella)
<img src="/folder/myfile.png" /> (con i principali slash/nella cartella secondaria)
<img src="../folder/myfile.png" /> (con punti e una barra iniziale/nella sottocartella)

fonte

2013-01-23 Chase Florell

In tutti i casi si tratta di percorsi relativi alla directory base del documento HTML, che è l'URL da cui è stato caricato il documento. Se il documento è stato caricato da un URL Web, tutti gli URL vengono risolti in relazione a quell'host. I percorsi assoluti sono risolti rispetto alla radice del sito, gli URL relativi sono relativi al percorso della pagina su cui appaiono. Gli URL verranno risolti in risorse locali solo se la pagina è stata caricata da un file HTML locale (in genere espresso come file: // ... URL). –

@JimGarrison Sì, questo non prende in considerazione l'atto di caricare i file sul computer locale senza un server web. –

Una barra iniziale indica al browser di avviarsi nella directory principale.
Se non si dispone della barra iniziale, si fa riferimento alla directory corrente.
Se aggiungi due punti prima della barra iniziale, significa che stai facendo riferimento al padre della directory corrente.

Prendere la seguente struttura di cartelle

demo folder structure

avviso:

il segno di spunta ROOT è verde,
il secondo segno di spunta è di colore arancione,
il terzo segno di spunta è viola,
il segno di spunta indietro è giallo

Ora nel file index.html.en si vorrà mettere il seguente markup

<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>

Ora, se si carica il file index.html.en situato nella seconda sottocartella
http://example.com/subfolder/subfolder/

Questa sarà la vostra uscita

enter image description here

fonte

2013-01-23 20:43:21

Come fare correttamente riferimento alle risorse locali in HTML?

risposta

Problemi correlati