3
respostas

[Dúvida] "Uma pessoa olhando para esquerda" - descrição aparece, mas a imagem não

oii! queria pedir uma ajuda para entender e corrigir um probleminha que me deparei ao abrir meu jogo no site do Vercel: apenas a descrição da imagem aparece, mas ela, não.
segue o site para análise: https://jogo-ivory-phi.vercel.app/
me pergunto se foi algum erro no upload do arquivo ao github, uma vez que o instrutor guilherme fez upload de 10 arquivos e eu só consegui localizar 8 na pasta do js-curso-2-aula1
agradeço desde já! <3

3 respostas

Bom dia, tudo bem?

Isso é um problema no caminho de acesso à imagem no projeto. Talvez você não tenha percebido isso quando testava o código localmente, porque o navegador salvou a informação da imagem em cache e, quando publicou no Vercel, o caminho continuou errado.

Como não consigo ver o seu código a partir do Vercel, recomendo que envie o link do seu repositório para que eu consiga te orientar exatamente como resolver. Agora, se quiser por si próprio tentar resolver o problema, recomendo que busque a tag da imagem e verifique o caminho que leva ao arquivo de imagem é o correto.

Espero ter ajudado e fico à disposição para ajudar!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

oi, Armano! tudo bem?
agradeço a resposta!
encaminho aqui meu repositório para análise e solicitação de ajuda: https://github.com/fararinha/Jogo_do_numero_secreto

Olá! Peço desculpas pela demora em retornar.

Analisando, vi algumas questões de melhoria e entendi por que a imagem não aparece corretamente, é por causa do caminho que você usou no HTML.

Quando acessamos o seu projeto, mais especificamente o "index.html", encontramos a tag da imagem:

<img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />

Nela vemos que você definiu que sua imagem está na pasta "img" e, ao acessá-la, terá a imagem. Porém, quando vemos o seu projeto, todas as imagens não estão dentro de nenhuma pasta, estão apenas na raiz do projeto.

Com isso, a solução e uma boa prática é criar uma pasta chamada "img" e colocar todas as imagens dentro dela. Segue um print de como deve ficar a organização de pastas e arquivos do projeto:

Captura de tela do VS Code que mostra a organização de pastas e arquivos de um projeto base JS com HTML

Além disso, recomendo que não crie arquivos com espaço entre nomes. Em alguns tipos de tecnologias e ferramentas que você for usar no futuro, esse tipo de arquivo pode causar problemas, então renomeie o "JS Game.html" para "JSGame.html".

No mais, fico à disposição!