Localhost - Imagem não Carrega

[Cláudio Rocha RJ 0]

Boa Noite,  (Coloquei essa dúvida aqui pois não consegui classificá-lo em outra seção.

Estou iniciando no PHP para web e estou utilizando um livro para acelerar o aprendizado. Fiz a instalação do Apache 2.4, MySQL 5.6 e PHP 5.6 no Windows 7 Professional (Service Pack 1). A instalação parece ter sido bem sucedida e o Apache inicia normalmente. Num dos primeiros exemplos do livro, quando acesso o index.html (ainda não cheguei nos arquivos .php) através do localhost, o site carrega corretamente, mas sem nenhuma da imagens que fazem parte do layout definido no projeto.

 

Nas ferramentas para desenvolvedor, na aba Network, quando clico nas imagens com erro 403, aparece a mensagem abaixo: 

Forbidden 

You don't have permission to access /hotel_lorem/imagens/imagem-topo-pagina.jpg on this server. 

Acho que o problema tem a ver com as permissões de acesso.
 

Estive fazendo alguns testes hoje e percebi algumas curiosidades: 

1) A página carrega normalmente no navegador, quando acionada fora do servidor Apache; 

2) Analisando o desempenho da página nas ferramentas para desenvolvedor do Google, verifiquei que as imagens não carregavam (erro 403 - forbidden); 

3) Nesta mesma ferramenta, verifiquei que na seção Sources estavam todos as pastas da página (CSS, script), menos a das imagens. No arquivo carregado fora do servidor Apache aparecem todas as pastas (CSS, script, imagens). 

4) Estou pesquisando sobre permissões do Apache configuradas no arquivo httpd.conf; 

Estou ainda matutando como o código original pode apresentar comportamentos tão diferentes. 

Se alguém tiver alguma dica, eu aceito de bom grado. Abraços e muito obrigado pela ajuda.

[Sergio S. F. Pereira 39]

Boa noite!

Como você está iniciando, sugiro instalar o Xamp que já vem pré-configurado com apache, php e mysql, a última versão é o XAMPP para Windows 5.6.30, 7.0.15 & 7.1.1 https://www.apachefriends.org/pt_br/download.html

 

É só colocar seus projetos dentro da pasta c:\xampp\htdocs e chamar no navegador por http://localhost/seuprojeto

Não precisa dar permissão para rodar no w7

[Cláudio Rocha RJ 0]

Obrigado Sérgio,

Acho que eu esqueci de informar mas eu instalei e configurei o Wamp nesse notebook. O resultado foi o mesmo do Apache, não carregando as imagens. Achei que pudesse ser no CSS mas já coloquei o background-image de todas as formas possíveis.

 

background-image: url(/imagens/imagem-topo-pagina.jpg);

 

background-image: url(../imagens/imagem-base-pagina.png);

 

Nenhuma delas carregou as imagens.
 

[Sergio S. F. Pereira 39]

Bom dia Cláudio,

Eu passei um perrengue aqui tentando instalar o wampp e acabei desistindo, pois apesar de ter o visual studio 2015 com todos os componentes necessários instalados, alguns módulos do wampp não inicializavam por falta de algumas dlls que na verdade estão instaladas,  mas para o wampp não kkkk.

Sei que o 7 prof é meio chatinho quanto a permissões, então me responda, na hora de instalar o wampp você o fez como administrador? Se não, desinstale-o e tente executar como administrador o arquivo de instalação.

Se o html carrega normal abrindo com o navegador direto da pasta então realmente existe um problema de permissão ou de algum módulo do wampp.

Quando você chama no navegador o "localhost" a tela de boas vindas é exibida?

[gabrieldarezzo 255]

Antes de desinstalar como está o seu atributo src da imagem?

Já tentou algo assim?

 

<img src="http://localhost/meu_projeto/images/balao.png" alt="">

Onde localhost/ seria equivalente ao C:\wamp\www 
Onde localhost/meu_projeto seria equivalente ao C:\wamp\www\meu_projeto

Onde localhost/meu_projeto/imagens/balao.png seria equivalente ao C:\wamp\www\meu_projeto\imagens\balao.pgn

 

Testa diretamente pela tag img, se funcionar se volta pro CSS ;)

 

Enfim não sei se deu pra pegar o conceito de pastas...

 

 

 

 
 

[marsolim 110]

eu uso XAMPP e o bixim nunca me deu problemas hehehe

[Sergio S. F. Pereira 39]

gabrieldarezzo,  a princípio tb pensei nisto mais depois vi isto

4 horas atrás, Cláudio Rocha RJ disse:

 Achei que pudesse ser no CSS mas já coloquei o background-image de todas as formas possíveis.

 

background-image: url(/imagens/imagem-topo-pagina.jpg);

 

background-image: url(../imagens/imagem-base-pagina.png);

 

Nenhuma delas carregou as imagens.
 

Se ele ta carregando imagens de fundo então ele precisa de uma <div> para exibir estas imagens e essa <div> tem que ter width e height definidos de acordo com o tamanho da imagem, mas ele também disse que:

17 horas atrás, Cláudio Rocha RJ disse:

1) A página carrega normalmente no navegador, quando acionada fora do servidor Apache; 

Então tá meio confuso isso daí, por isso eu sugeri a reinstalação e se não der certo parte pro xampp como disse o marsolim: nunca deu problemas...

[Cláudio Rocha RJ 0]

Postei as imagens do site carregado à partir do localhost e do navegador e também da ferramenta do desenvolvedor do Google. Eu acredito que as configurações do Wamp e do Apache estão corretas pois consegui carregar outro projeto.

[Cláudio Rocha RJ 0]

Quando utilizei a tag img a imagem carregou. Quando carrego no CSS não.... Vai entender.

 

[Sergio S. F. Pereira 39]

Baseado no caminho das imagens do print que você colocou aqui faça um teste, copie o html abaixo para um arquivo chamado teste.html dentro da sua pasta hotel_lorem e abra no navegador: localhost/hotel_lorem/teste.html, depois me diga se a imagem apareceu ou não.

PS: não esqueça de trocar os valores de width e height de acordo com o que eu comentei no html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.topo{
  background-image:url(imagens/imagem-topo-pagina.jpg);
  width:800px;//substituir 800 pelo tamanho da sua imagem
  height:50px;//substituir 50 pela altura da sua imagem
}
</style>
</head>
<body>
<div class="topo"></div>
</body>
</html>

 

Daí conte pra gente o que resultou

[Cláudio Rocha RJ 0]

Testei e não funcionou. Erro 403 também.

 

[Cláudio Rocha RJ 0]

Aqui o caminho do arquivo .jpeg fica mais claro.

[Sergio S. F. Pereira 39]

rsrsrs, não era pra você criar uma pasta teste (a não ser que você copiou a pasta imagens pra dentro da pasta teste), era pra criar um arquivo teste.html dentro da pasta hotel_lorem

 

daí você chama no navegador por: localhost/hotel_lorem/teste.html

[marsolim 110]

uma dica, antes de desinstalar o WAMPP e instalar o XAMPP, faz backup dos arquivos que tiver no server

[Cláudio Rocha RJ 0]

Apresentou o mesmo problema. Tentei carregar um print da tela mas deu erro no carregamento.

 

[marsolim 110]

ah um detalhe o xampp pra funfar 100% tem que ser iniciado no modo administrador na hora que a gente starta o server pode ser que com o wampp também seja assim e se não tá abrindo ele como administrador pode ser que se fizer funfa direito

[marsolim 110]

olha que loco taveu aqui agora olhando as FAQs do XAMPP sem nenhum compromisso só por olhar mesmo quando me deparo com isso que talvez pode ser que seja o seu caso também

 

Citar

 

Sometimes there are problems with displaying pictures and style-sheets. Especially if these files are located on a network drive. In this case you can enable (or add) one if the following lines in the file "\xampp\apache\conf\httpd.conf":

 

EnableSendfile off
EnableMMAP off

 

This problem can also be caused by programs for regulating bandwidth, like NetLimiter.

 

 

vai que...

[gabrieldarezzo 255]

Legal se carrega na tag img, já temos uma pista.

 

Sempre q utilizar o background-image do .css

Precisa pensar em caminhos relativos....

 

ex de um contexto:

 

/index.html

/css/custom.css

/img/balao.png

 

Então você deve pensar que para acessar as imagens da pasta 'img' a partir do css, você deve voltar 1 'level' e descer para o img

 

background-image: url("../img/balao.png");

 

[Cláudio Rocha RJ 0]

Testei algumas modificações no código HTML encaminhadas por um colega elas funcionaram.

O que realmente me deixa intrigado é como o layout funciona corretamente diretamente no navegador e, ao mesmo tempo não permite o carregamento das imagens quando iniciado pelo servidor

Outra coisa que não consigo entender é como esse outro HTML modificado  funciona e o original não. Se a página original é carregada corretamente pelo navegador, em tese sua sintaxe esta correta. Eu associei inicialmente a algum problema de permissão, mas depois desse teste, já nem sei mais onde pode estar o problema.

 Estou tentando anexar os arquivos compactados mas está dando falha no upload.

 

[CrazY. 1]

Bom, se você está fazendo o "upload"  com o input file, então você deve informar o local de origem da imagem, desde o HD até a pasta em que ela se encontra. Agora se você está inserindo apenas o link da imagem (parecido com o sistema que estou desenvolvendo) você só precisa adicionar o diretório pasta/imagem.jpg que o próprio HTML identifica a pasta. Espero ter esclarecido algo.

 

Sobre o seu servidor local, não importa qual seja, o problema mesmo deve estar no seu arquivo de conexão.