1
resposta

[Bug] Quando fui abrir o site no github as imagens estão quebradas

Quando abro o site pelo github as imagens não aparecem, ao meu ver no codigo esta tudo correto com os destinos certos https://igorrodrigues-ira.github.io/Tecboard/

1 resposta

Olá, Igor. Como vai?

É muito comum que as imagens funcionem perfeitamente no nosso computador de forma local e acabem "quebrando" quando publicamos o site no GitHub Pages. Isso geralmente acontece por motivos relacionados à forma como os servidores do GitHub fazem a leitura dos seus arquivos.

Abaixo, detalho os dois pontos principais que você deve verificar no seu código para solucionar esse bug:

  • Caminhos relativos vs. caminhos absolutos: No seu computador, um caminho iniciado com barra, como /img/foto.png, pode funcionar sem problemas. Porém, no GitHub Pages, o seu site está hospedado dentro de uma subpasta (o seu repositório Tecboard). Se você usar a barra no início, o navegador vai procurar a imagem na raiz do seu perfil e não dentro da pasta do projeto. A solução é sempre usar um ponto e barra para indicar a pasta atual, ou apenas o nome da pasta.
  • Letras maiúsculas e minúsculas (Case Sensitivity): O sistema operacional Windows não faz distinção entre letras maiúsculas e minúsculas em nomes de arquivos. Portanto, se a sua imagem se chama Banner.jpg e no HTML você digitou banner.jpg, o Windows exibe a imagem normalmente. No entanto, os servidores do GitHub rodam em Linux, que é um sistema estritamente sensível a essas diferenças. Se o código não estiver escrito exatamente igual ao nome do arquivo, a imagem vai quebrar.
  • Extensões dos arquivos: O mesmo conceito acima se aplica para as extensões. Verifique se a extensão no código corresponde exatamente à da imagem (por exemplo, um arquivo .png referenciado como .PNG não irá funcionar no GitHub).

Veja um exemplo de como ajustar o seu código HTML na prática:

<img src="/imagens/Banner.JPG" alt="Banner do site">

<img src="./imagens/banner.jpg" alt="Banner do site">

Recomendo que você revise as tags <img> e também os caminhos de imagens no seu arquivo de CSS, faça os ajustes necessários para caminhos relativos e suba as alterações (o commit e push) para o seu repositório. Lembre-se que o GitHub Pages pode levar de 1 a 5 minutos para refletir as atualizações no link online.

Espero que possa ter lhe ajudado!