Come salire di un livello nel percorso src di un URL in HTML?

101

Sto memorizzando i fogli di stile in {root} / styles mentre le immagini in {root} / images per un sito web. Come faccio a dare il percorso nei fogli di stile per andare a cercare nella directory delle immagini le immagini specificate?

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

html css relative-path

— aateeque
fonte

184

Utilizzare ..per indicare la directory principale:

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

— lonesomeday
fonte

L'ho letto anche altrove, ma non funziona! (almeno in Chrome)

— aateeque

27

Lo fa. Tuttavia, tieni presente che la posizione è relativa alla posizione del file CSS, non al documento che incorpora il file CSS.

— ThiefMaster

1

@ThiefMaster Dovrebbe essere se usiamo solo CSS in linea

— 1000 Gbps

57

Ecco tutto ciò che devi sapere sui percorsi dei file relativi:

Iniziando con / ritorna alla directory principale e inizia da lì
Iniziando con si ../ sposta indietro di una directory e inizia da lì
Iniziando con si ../../ sposta indietro di due directory e inizia da lì (e così via ...)
Per andare avanti , inizia con la prima sottodirectory e continua ad andare avanti.

Clicca qui per maggiori dettagli!

— S.Akruwala
fonte

52

Usa ../:

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

Puoi usarlo tutte le volte che vuoi, ad esempio ../../images/o anche in posizioni diverse, ad esempio ../images/../images/../images/(come ../images/ovviamente)

— ThiefMaster
fonte

9

In Chrome, quando carichi un sito Web da un server HTTP, funzionano sia i percorsi assoluti (ad esempio /images/sth.png) che i percorsi relativi a una directory di livello superiore (ad esempio ../images/sth.png).

Ma!

Quando carichi (in Chrome!) Un documento HTML dal filesystem locale non puoi accedere alle directory sopra la directory corrente. Cioè non puoi accedere ../something/something.sthe cambiare il percorso relativo in assoluto o qualsiasi altra cosa non aiuterà.

— jaboja
fonte

1

Dopo aver ricontrollato, posso segnalare che i percorsi relativi del file system locale usando ../funzionano bene - o almeno funzionano bene in questo caso specifico!

— aateeque

1

Funziona su Linux e Windows, non su Mac (la mia esperienza)

— gabn88

I collegamenti non contano qui, poiché non esiste lo stesso controllo dell'origine per loro. Anche questa risposta ha 6 anni, quindi i browser potrebbero essere cambiati molto.

— jaboja

1

Sto solo confermando per chiunque altro visualizzi la risposta

— Ajay

0

Supponendo di avere la seguente struttura di file:

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

In CSS puoi accedere image1, ad esempio, utilizzando la riga ../images/image1.png.

NOTA : se si utilizza Chrome, potrebbe non funzionare e verrà visualizzato un messaggio di errore relativo all'impossibilità di trovare il file. Ho avuto lo stesso problema, quindi ho appena cancellato l'intera cronologia della cache da Chrome e ha funzionato.

— A.Tressos
fonte

0

Se memorizzi fogli di stile / immagini in una cartella in modo che più siti Web possano utilizzarli o desideri riutilizzare gli stessi file su un altro sito sullo stesso server, ho scoperto che il mio browser / Apache non mi consente di accedere a qualsiasi cartella principale sopra l'URL principale del sito web. Questo sembra ovvio per motivi di sicurezza: non si dovrebbe essere in grado di navigare sul server in un luogo diverso dalle cartelle Web specificate.

Per esempio. non funziona: www.mywebsite.com/../images

Come soluzione alternativa, utilizzo i collegamenti simbolici:

Vai alla directory di www.mywebsite.com Esegui il comando ln -s ../images images

Ora www.mywebsite.com/images punterà a www.mywebsite.com/../images

— Leendert
fonte