Localhost - Imagem não Carrega

Enviada por Cláudio RJ 
Cláudio RJ
Localhost - Imagem não Carrega
18 de April de 2017 às 03:10AM
Boa Noite,

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.

No meu argivo CSS a imagem está da seguinte forma:

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

Já tentei com aspas simples e duplas e não funciona.

Alguém do fórum tem alguma dica?

Desde já fico muito agradecido pela atenção de vocês.
Felipe M.
Re: Localhost - Imagem não Carrega
18 de April de 2017 às 11:59PM
Fala aí, Claudio.

Aconselho vc postar por completo o seu elemento css e o elemento alvo.

Mas, ainda assim, vou tentar lhe ajudar.

CSS:
body { background: url('imagens/imagem-topo-pagina.jpg'); }

Sobre as aspas: Não tem nenhuma diferença em aspas simples ou aspas duplas ('/"). Mas SÃO NECESSÁRIAS.

Sobre os diretórios: Quando você coloca "../" na url, vc orienta o css a voltar um diretório.
Exemplo 1:
Se vc tem o arquivo index.html e uma pasta imagens lado a lado, vc não deve setar o "../" na url. Pois a pasta imagens está no mesmo diretório do arquivo html.

Exemplo 2:
Se você tem duas pastas: Uma com o arquivo html (ou um arquivo com seus elementos css [.css]) e outra com as imagens, aí sim vc deve usar o "../" para retornar um diretório.

Sobre o elemento:
Como vc não postou o elemento, eu coloquei o "body" como exemplo. Mas você pode setar um background para vários elementos. Uma <div> por exemplo! Quando seto o elemento "body", o background ocupa todo o corpo do site. Existe ainda métodos de formatação para a imagem. O que não é o caso desse post.


Espero ter ajudado!
Cláudio RJ
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 11:37AM
Felipe,

Antes de mais nada gostaria de agradecer à sua atenção. Vou passar parte do código. O CSS está funcionando corretamente e aplicando o estilo aos elementos, menos carregar as imagens.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html"; charset="utf-8" http-equiv="content-type">
<meta content="Site Hotel LOREM IPSUM" name="description">
<title>Hotel LOREM IPSUM</title>
<link rel="stylesheet" href="css/estilos_gerais.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {$( "#calendario" )
.datepicker({changeMonth: true,
ChangeYear: true,
showOtherMonths: true,
selectOthersMonths: true,
dateFormat: 'dd/mm/yy',
dayNames:['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho',
'Agosto','Setembro', 'Outubro', 'Novembro', 'Dezembro'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out',
'Nov', 'Dez']});});
</script>
</head>
<body class="corpo-documento">
<div class="topo-pagina">
<div class="base-pagina">
<div class="pagina">
<div class="main">
<div class="header">
<div class="header-topo">



CSS


.topo-pagina {
background-image: url('imagens/imagem-topo-pagina.jpg');
background-repeat: no-repeat;
background-position: center top;
width: 100%;
float: left;
}

.base-pagina{
background-image: url(../imagens/imagem-base-pagina.png);
background-repeat: repeat-x;
background-position: left bottom;
width: 100%;
float: left;
}


Estrutura de Pastas

C:/Program Files/Apache24/htdocs/hotel_lorem

O CSS e as imagens estão dentro pastas próprias e o index na pasta hotel lorem.


Testei a alteração e ainda não funciona. A pasta de imagens está com as permissões necessárias para seu funcionamento.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 01:53PM
Fala aí, Cláudio.

Corrigi seu script e fiz upload aqui na comunidade: http://phpbrasil.com/script/PZkigGzDZQVL/preview

Considerações:
No index.php, vc deve fechar as tags html, body, div e etc.
Como vc está iniciando, te aconselho procurar um tutorial HTML do zero. Pratique bastante.
No início, prefira criar seus códigos com o bloco de notas, ou algum editor de texto de sua preferência que não tenha a função autocompletar. Vai ajudar bastante no aprendizado!

No estilos_gerais.css:
Como citei anteriormente, a url da imagem deve estar entre aspas: background-image: url('../imagens/imagem-topo-pagina.jpg');

Agora, leia da seguinte forma:
../ (Retorne um diretório)
imagens/ (Abra o diretório imagens)
imagem-top-pagina.jpg (Abra o arquivo imagem-top-pagina.jpg)

Lembre-se: Alguns navegadores armazena os arquivos linkados em cache, então, configure seu navegador para não armazenar seus arquivos em cache enquanto os desenvolve. Pesquisa no Google que vc encontra referências.

Espero que tenha compreendido tudo.

Aproveitando para lembrar que essa comunidade trata questões voltadas à linguagem PHP! Não se ofenda se algum usuário rejeitar ajudá-lo por aqui.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 02:00PM
Vou te recomendar um curso totalmente GRATUÍTO. Aliás, nem pagando vc consegue um curso tão perfeito!
Acessa o Youtube e pesquisa o canal "Curso em Vídeo", ou simplesmente abra o link:

https://www.youtube.com/playlist?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o

Se tens amigos com mesmo interesse, compartilhe com eles também! Esse aí é nota mil!

Depois de aprender o HTML, tem um curso de PHP para Iniciantes nesse canal. Confere lá.
Cláudio RJ
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 03:33PM
Opa Felipe,

Eu só postei parte do código para não ficar muito enfadonho. O Código em HTML está OK, tanto que quando eu clico no index.html ele carrega perfeitamente no navegador, inclusive com as imagens. Meu problema está quando eu carrego através do servidor. Instalei o Apache e as imagens não foram carregadas. Instalei o WAMP para testar e o problema persistiu. Estou utilizando Sublime Text e Netbeans.

Eu tentei hoje de manhã conforme você orientou. Eu já tinha tentado antes. Mas continua sem carregar.

Valeu pelas dicas gerais.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 04:02PM
Testou o código que postei?
Cláudio RJ
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 04:15PM
Testei sim. Na verdade já havia testado antes. Desculpe por ter postado poucas informações na mensagem inicial
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 04:27PM
Cara, o código que postei está funcionando 100%. Confere aí que tem algo impedindo o carregamento da imagem.

Não tem explicação pra eu te enviar o código, já contendo todos os arquivos e separados em pasta, tudo zipado, funcionando, e não carregar a imagem. :O

Topa um acesso remoto pra conferir isso aí?
Cláudio RJ
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 04:37PM
Eu tô no trabalho e esse código ficou no meu notebook em casa. Mais tarde vou postar o código completo, que também não tem nada de excepcional, para você dar uma olhada. Mais uma vez obrigado pela atenção. Esse problema está empacando meu avanço no estudo do php. Estou intrigado porque só as imagens não carregam e todo o resto sim.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
19 de April de 2017 às 06:45PM
Vai na pasta raiz do seu site, seleciona todos os arquivos e compacta com o 7zip ou WinRar, upa em algum site e posta o link aqui. Deixe o código como está. Apresentando o erro!
Cláudio RJ
Re: Localhost - Imagem não Carrega
20 de April de 2017 às 12:41AM
Felipe,

Compartilhei no Google Drive. O link tá aí....

https://drive.google.com/open?id=0B-5pTetVNq2OcXlveDdiUUUyLUE

Valeu
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
20 de April de 2017 às 04:17PM
Fala aí, Cláudio.

Observando seu código, tem vários erros.
O problema não é carregamento da imagem, mas sim o layout do seu site.

Imagine o seguinte, eu faço duas divs com background, mas a segunda div é o conteúdo da primeira. Logo, o fundo da segunda vai sobrepor o fundo da primeira div.
<div style="background: url('foo.jpg');">
<div style="background: url('bar.jpg');">
Fubá
</div>
</div>

Seguindo esse pensamento, vc deve reformular seu layout. Separar os elementos por setores: Header (Topo/cabeçalho), Container (Main / Conteúdo) e Footer (Base, rodapé). Até então, parte do seu site contém isso certo:
<div class="header">
<div class="header-topo">

</div>
<div class="header-base">

</div>
<div class="barra-menu">
<div class="dropdown">
<button class="dropbutton">Consulta</button>
</div>
<div class="dropdown">
<button class="dropbutton">Cadastro</button>
</div>
<div class="dropdown">
<button class="dropbutton">Reserva</button>
</div>
<div class="dropdown">
<button class="dropbutton">Histórico</button>
</div>
<div class="dropdown">
<button class="dropbutton">Login</button>
</div>
</div>
</div>
<div class="conteudo-corpo">
<div class="coluna-esquerda" id="conteudo">
</div>
<div class="coluna-direita">
<div class="linha1-coluna-direita">
<div class="calendario" align="center" id="calendario"></div>
</div>
<div class="separacao-linhas"></div>
<div class="linha2-coluna-direita">

</div>
</div>
</div>
<div class="rodape-pagina">
<div align="center">
</div>
</div>

Mas o resto está misturado:

<body class="corpo-documento">
<div class="topo-pagina">
<div class="base-pagina">
<div class="pagina">
<div class="main">
<!-- AQUI ESTAVA A PARTE CERTA -->
</div>
</div>
</div>
</div>
</body>

Acompanha comigo:
Dentro to topo-pagina, temos a base-pagina;
Dentro da base-pagina, temos a pagina;
Dentro da pagina, temos a main;
Está errado!
Se você remover essa parte e trabalhar somente com a parte certa, você vai conseguir trabalhar bem seu layout.
Dei uma adiantada pra você, mas só pra ter uma base, heim!
Baixe aí e comece os estudos:
https://drive.google.com/file/d/0B6w33rJH0dM5aGdZaGpKT0VPUDQ/view?usp=sharing
Cláudio RJ
Re: Localhost - Imagem não Carrega
21 de April de 2017 às 08:53PM
Felipe, muito obrigado. Estou fazendo as mudanças de acordo com o que você indicou e vou mandar um aviso para a editora sugerindo um esclarecimento ou uma revisão no código (o livro é Construindo uma Aplicação Web Completa com PHP e Mysql - Novatec).

O mais curioso é o que boa parte do layout (exceto o calendário) funciona normalmente quando carregado direto no navegador, sem a utilização do servidor.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
21 de April de 2017 às 09:19PM
Fala aí, Cláudio.

Que bom que gostou das ideias! Espero que consiga elaborar um layout bacana!
Dê preferência a livros que tratam do HTML5 e CSS3. Eu, particularmente, odeio livros! Prefiro dar uma googlada pra sanar minhas dúvidas, e, como na maioria das vezes, começo lendo a documentação/manual da linguagem em questão.

O HTML5 trouxe várias tags pra separar os elementos do site, o que facilita muito a organização e a exibição nos sistemas de busca: https://www.w3schools.com/html/html5_semantic_elements.asp

No seu projeto, vc está utilizando um layout estático, o que não é recomendado pra atualidade. Essa questão de layout tem mudado muito nos últimos anos. Inclusive, tive que me adaptar ao tal do "Layout responsivo". Dá uma pesquisada no Youtube que tem várias vídeo-aulas bacanas sobre o assunto. Eu aprendi o básico no canal do Prof. José de Assis.

No início é fundamental vc criar seu código do zero. Ajuda bastante! Mais pra frente vai se deparar com ferramentas/APIs que já fazem quase tudo por vc.

Boa sorte e bons estudos! ;)
Cláudio RJ
Re: Localhost - Imagem não Carrega
22 de April de 2017 às 01:29AM
Felipe,

Estive fazendo alguns testes hoje e percebi algumas curiosidades:

1) Como já havia dito anteriormente, 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 que você gentilmente me encaminhou, todos as pastas aparecem (CSS, script, imagens) e no arquivo carregado fora do servidor Apache também.

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

5) Só não acredito que possa ser algum problema de permissão uma vez que no seu arquivo as imagens carregam normalmente.

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

Se tiver alguma dica, eu aceito de bom grado. Abraços e muito obrigado pela ajuda.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
22 de April de 2017 às 05:27AM
Fala aí, Cláudio.

Estranho mesmo, cara!
Tem que dar uma revirada aí pra entender o que está havendo.
Marca uma hora pra nós abrirmos um acesso remoto.
Usa Windows ou Linux?
Cláudio RJ
Re: Localhost - Imagem não Carrega
22 de April de 2017 às 07:57PM
Uso o windows. Se você usar o Apache 2.4, posta o httpd.conf aqui. Eu também tenho o Wamp instalado. Se você o utilizar pode mandar o arquivo de configuração.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
22 de April de 2017 às 08:13PM
Uso o IIS que é próprio do Windows.

Mas é difícil acreditar que isso seja erro de configuração do Apache, uma vez que roda todo o resto do seu site. ;S
Cláudio RJ
Re: Localhost - Imagem não Carrega
22 de April de 2017 às 08:52PM
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.

Veja que o problema tem a ver com as permissões de acesso.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
23 de April de 2017 às 07:22PM
Já verificou as permissões pelo próprio Windows, no servidor?
Cláudio RJ
Re: Localhost - Imagem não Carrega
26 de April de 2017 às 05:59PM
Felipe,

Onde ficam essas permissões? Atualmente o único projeto que funciona no servidor foi aquele que você me encaminhou. Qualquer outro novo projeto criado na máquina não carrega as imagens.
Felipe M. @LipESprY
Re: Localhost - Imagem não Carrega
27 de April de 2017 às 03:14AM
Fala aí, Cláudio.

No próprio Windows, abra a pasta do seu projeto (Normalmente www, wwwroot, htpdocs, etc), abra as propriedades da pasta (Botão direito do mouse > Propriedades) e abra a aba segurança.

Verifique as contas listadas e suas respectivas permissões.

Para fins de depuração, adicione a conta "Todos" com permissão "Controle total". Caso funcione, verifique se o Apache está sendo executado com permissões de administrador e, caso não, verifique se a conta usada pelo Apache tem acesso de leitura das imagens.

Lembrando que a permissão dos arquivos dentro da pasta do projeto podem herdar, ou não, as permissões da pasta-mãe/raiz do projeto.

Como havia citado, acho estranho a necessidade de permissão para as imagens. Verifique se sua conta no Windows têm as permissões administrativas e se o seu editor de imagens, ao qual foram criadas as imagens, está salvando os arquivos com as permissões corretas - verificando da mesma forma citada para a pasta raiz.

Boa sorte!
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.