Como subir um nível no caminho src de uma URL em HTML?

101

Estou armazenando folhas de estilo em {root} / styles enquanto imagens em {root} / images para um site. Como forneço o caminho nas folhas de estilo para procurar no diretório de imagens as imagens especificadas?

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

html css relative-path Aateeque
fonte

Respostas:

184

Use ..para indicar o diretório pai:

background-image: url('../images/bg.png');
solitário
fonte
Eu li isso em outro lugar também - mas não funciona! (pelo menos no Chrome)
aateeque
27
É verdade. No entanto, observe que a localização é relativa à localização do arquivo CSS, não ao documento que incorpora o arquivo CSS.
ThiefMaster
1
@ThiefMaster Deve ser se estivermos usando apenas CSS inline
1000 Gbps,
57

Aqui está tudo o que você precisa saber sobre caminhos de arquivo relativos:

  • Começando com / retorna ao diretório raiz e começa aí

  • Começar com ../ move um diretório para trás e começa aí

  • Começar com ../../ move dois diretórios para trás e começa aí (e assim por diante ...)

  • Para avançar , basta começar com o primeiro subdiretório e continuar avançando.

Clique aqui para mais detalhes!

S.Akruwala
fonte
52

Use ../:

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

Você pode usar isso quantas vezes quiser, por exemplo, ../../images/ou mesmo em posições diferentes, por exemplo ../images/../images/../images/(o mesmo que é ../images/claro)

ThiefMaster
fonte
9

No Chrome, quando você carrega um site de algum servidor HTTP, ambos os caminhos absolutos (por exemplo /images/sth.png) e os caminhos relativos para algum diretório de nível superior (por exemplo ../images/sth.png) funcionam.

Mas!

Quando você carrega (no Chrome!) Um documento HTML do sistema de arquivos local, você não pode acessar os diretórios acima do diretório atual. ../something/something.sthOu seja, você não pode acessar e mudar o caminho relativo para absoluto ou qualquer outra coisa não ajudará.

Jaboja
fonte
1
Ao verificar novamente, posso relatar que os caminhos relativos do sistema de arquivos local usando ../funcionam bem - ou pelo menos funcionam bem neste caso específico!
aateeque
1
Ele funciona em Linux e Windows, não em Mac (minha experiência)
gabn88
Os links não contam aqui, pois não há verificação da mesma origem para eles. Além disso, esta resposta tem 6 anos, então os navegadores podem ter mudado muito.
jaboja
1
Estou apenas confirmando para quem está vendo a resposta
Ajay
0

Suponha que você tenha a seguinte estrutura de arquivos:

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

No CSS você pode acessar image1, por exemplo, usando a linha ../images/image1.png.

NOTA : Se você estiver usando o Chrome, ele pode não funcionar e você receberá uma mensagem de erro informando que o arquivo não foi encontrado. Eu tive o mesmo problema, então eu apaguei todo o histórico do cache do Chrome e funcionou.

A.Tressos
fonte
0

Se você armazena folhas de estilo / imagens em uma pasta para que vários sites possam usá-los, ou se deseja reutilizar os mesmos arquivos em outro site no mesmo servidor, descobri que meu navegador / Apache não permite que eu vá para qualquer pasta pai acima do URL raiz do site. Isso parece óbvio por razões de segurança - não se deve conseguir navegar no servidor em qualquer lugar que não seja as pastas da web especificadas.

Por exemplo. não funciona: www.mywebsite.com/../images

Como solução alternativa, eu uso links simbólicos:

Vá para o diretório de www.mywebsite.com Execute o comando ln -s ../images images

Agora www.mywebsite.com/images irá apontar para www.mywebsite.com/../images

Leendert
fonte