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');

Risposte:


184

Utilizzare ..per indicare la directory principale:

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

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!


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)


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


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.


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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.