Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Bug] Erro nas imagens ao postar no github pages

Boa tarde, finalizei o curso e estou tentando postar meu projeto no github pages, mas o projeto está sendo postado com falta de alguns alementos e funções, ele é postado assim:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
além da falta das imagens e ícones, ele não está mostrando as funções de apagar tarefas e nem executando essas funções, o que é estranho porque no live server ele está funcionando perfeitamente.

Já tentei: copiar/colar o código do professor dentro dos arquivos (substituindo o meu código), criar um novo repositório com o código dele, depois outro novo com meu código, depois mais um reescrevendo o código do zero, mas ele sempre posta da mesma forma, não sei mais o que testar :(

Meu gitub: https://github.com/yazancan/fokus - nele está com o meu código original, desfiz as alterações de teste citadas antes.
Página postada: https://yazancan.github.io/fokus/

Como conserto isso?

Grata!

3 respostas
solução!

Oii, Yasmin!

Pelo seu relato e analisando o código, entendi o que está acontecendo. É uma situação muito comum quando movemos um projeto do ambiente local (Live Server) para o GitHub Pages.

O problema principal reside nos caminhos das imagens e na forma como o navegador interpreta o local dos arquivos.

O erro nos caminhos (Paths):

No seu HTML, você utilizou caminhos que começam com uma barra, por exemplo:
<img src="/imagens/logo.png" ... />

  • No Live Server: O servidor local entende que / é a raiz da sua pasta de projeto. Tudo funciona.
  • No GitHub Pages: O seu projeto geralmente fica em uma subpasta com o nome do repositório (ex: usuario.github.io/nome-do-repositorio/). Quando você usa /imagens/logo.png, o navegador tenta buscar a imagem na raiz do domínio do GitHub, e não dentro da pasta do seu projeto.

Como corrigir

Pra resolver, você deve transformar esses caminhos em caminhos relativos, adicionando um ponto antes da barra (./).

  1. No arquivo index.html:
    Substitua todos os locais onde o src começa com /imagens/ por ./imagens/.

    • Exemplo: mudar <img src="/imagens/logo.png"> para <img src="./imagens/logo.png">.
  2. No arquivo script.js:
    Verifique as funções que alteram imagens ou sons.
    Certifique-se de que todos os arquivos chamados pelo JavaScript sigam esse padrão de caminho relativo ao arquivo que está sendo executado.

Por que as funções não funcionam?

Se o JavaScript não encontra um ícone ou um arquivo de som (como os arquivos .mp3 dentro da pasta sons), ele pode interromper a execução do script ao encontrar um erro de "404 Not Found". Como suas funções de cronômetro e tarefas dependem desses arquivos, o erro no carregamento impede que o restante da lógica funcione.

Dica Extra: Case Sensitivity

O GitHub Pages é sensível a letras maiúsculas e minúsculas. Tem sempre que verificar se seu repositório a pasta se chama imagens (minúsculo) ou Imagens (maiúsculo). O nome no código deve ser idêntico ao nome da pasta.

Após fazer essas alterações, faça o commit e o push para o GitHub. Aguarde alguns minutos e atualize a página do seu projeto.

Eu baixei seu projeto e fiz as modificações nele aqui, e você pode ver aqui no githubpages que está funcionando certinho.

teste de imagens

teste de imagens

Espero ter ajudado.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Oie!
Lorena você só me ajuda, deu tudo certo depois de fazer as mudanças no index, muito obrigada!

Oii!

Que bom, Yasmin. Fico feliz :D. Vou deletar o projeto que upei no meu github então.

Bons estudos.