Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Dúvida sobre o caminho certo do background-image

por Igor dos Santos Cunha
| 49.1k xp | 1 posts

Olá... há algum tempo tem ocorrido um probleminha meio chato comigo que gostaria de entender melhor...

Eu utilizo o VSCode e recentemente encarei um erro que foi o seguinte: o background-image carrega normalmente quando abro o projeto pelo Live Server, mas se eu abrir o projeto diretamente ou manualmente pelo navegador, o background-image não carrega.

Depois de muito pesquisar para entender melhor, cheguei a uma conclusão:

Se eu utilizar um caminho, exemplo:

body { background-image: url(../imagens/imagem01.jpg); }

O background-image é carregado apenas se eu abrir o projeto pelo Live Server. Se eu abrir manualmente pelo navegador, ele não carrega.

Agora, se eu utilizar um caminho, exemplo:

body { background-image: url("C:/Users/igor/Documents/meu-projeto/imagens/imagem01.jpg"); }

Agora inverte. O background-image é carregado apenas se eu abrir o projeto direto pelo navegador. Se eu abrir pelo Live Server o background-image não carrega.

Queria entender se esse erro é recorrente e qual seria a maneira mais correta de colocar o caminho da imagem para fins de portfólio, pois me preocupa caso não carregue ou funcione em outras máquinas, por exemplo. Importante: o uso de aspas dupla, aspas simples, ponto no início, jpeg, jpg, png etc... tudo isso já foi testado.

1 resposta
solução!
por Lorena Garcia
| 9808k xp | 14711 posts
Alura Scuba Team Suporte Educacional

Olá Igor, tudo bem?

Entendo sua preocupação e realmente pode ser um pouco confuso entender qual é o caminho correto para o background-image carregar corretamente em diferentes situações.

Normalmente, a maneira mais recomendada de definir o caminho da imagem é utilizando caminhos relativos, como você fez no primeiro exemplo. Isso porque, ao utilizar caminhos absolutos, como no segundo exemplo, o caminho pode variar de acordo com a máquina em que o projeto estiver sendo executado, o que pode gerar problemas de carregamento da imagem.

No entanto, é estranho que o background-image esteja carregando apenas em uma situação e não na outra, mesmo utilizando caminhos relativos. Talvez seja necessário verificar se a estrutura de pastas do seu projeto está correta e se a imagem está realmente no local indicado.

Outra possibilidade é que o servidor que você está utilizando para testar o projeto esteja configurado de maneira diferente do seu navegador, o que pode estar gerando esse comportamento inesperado.

Espero ter ajudado.

Um abraço e bons estudos.