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

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