[Dúvida] erro nas imagens

Olá, Ana Júlia! Tudo bem? Vou tentar te ajudar. Para solucionar esse problema, abra o projeto que você fez download no VSCode, em seguida vá ao arquivo index.html e localize a tag img da imagem que não está aparecendo. Essa tag está na linha 33 do código.

Veja que foi declarado o seguinte caminho src="/imagens/foco.png", mas o navegador não está reconhecendo o caminho para acessar a imagem foco.png. Para reconhecer o diretório, apague a barra (/) e ficará assim: Agora salve o arquivo, vá até o navegador e atualize a página.

Agora vamos compreender as motivações desse problema. Quando declaramos o caminho da imagem, precisamos passar o "endereço" para src de tal maneira que não gere dúvida para o navegador. No diretório do projeto (FOKUS-PROJETO-BASE) tem:

• style.css
• index.html (arquivo)
• imagens (pasta)
• sons (pasta)

Como index.html e imagens estão na mesma pasta, só precisariamos dizer ao navegador ENTRE NA PASTA IMAGENS QUE ESTÁ NO MESMO LOCAL QUE EU(index.html) E ESCOLHA O ARQUIVO FOCO.PNG

Para dizer isso, pasta declarar "imagem/logo.png"

A forma como estava declarada antes, gera uma limitação quando abrimos o arquivo diretamente clicando nele.

Ao final de tudo isso poderíamos pensar: por qual motivo colocariam um arquivo com esse erro? Não é um erro. É apenas a forma como abrimos esse arquivo que acaba gerando esse problema. Se você clicar diretamente no arquivo index.html, ele vai abrir no navegador e na aba de navegação vai aparecer o caminho Quando abrimos nosso arquivo dessa maneira, o navegador não consegue localizar a página da forma como foi descrita anteriormente src="/imagens/foco.png" por isso existem duas formas de tornar legível esse caminho: i) excluindo o barra (/) src="imagem/foco.png" ou adicionando ponto (.) antes dele para ficar assim src="./imagem/foco.png".

Vale lembrar que qualquer alteração que você faça no código, vai precisar atualizar manualmente a página apertando F5 ou no icone parece a logo da Skol.

O instrutor do curso não teve esse problema por que ele usou uma extensao LIVE SERVER para criar um servidor e carregador os arquivo. Esse servidor consegue reconhecer o caminho src="/imagens/foco.png"

Recomendo baixar a extensão LIVE SERVER

para facilitar sua vida! Quando usamos a extensão, é criado um servidor para carregar nosso projeto. Agora o endereço URL da página é outro: Sempre que você fizer alguma alteração e salvar, automaticamente recarrega na página. E tem mais, qualquer uma das formas declaradas é válida, seja como estava no início, seja como eu mostrei. Espero ter ajudado, desejo bons estudos! Até mais!

Acabei conseguindo consertar esse erro, apagando as / no inicio, tanto no index quanto no script.