Solucionado
Percebi que varias pessoas estavam com o mesmo problema que eu, "AS IMAGENS NÃO APARECEM", depois de muitas tentativas percebi que faltava um ".", o professor nos passa:
banner.setAttribute('src', '/imagens/foco.png')
mas meu código só funcionou depois de acrescentar o ".":
banner.setAttribute('src', './imagens/foco.png')
inclusive no html.
Olá, Monica!
É muito comum enfrentar esse tipo de problema ao trabalhar com caminhos de arquivos e diretórios no desenvolvimento web. O que aconteceu no seu caso é uma questão de como os caminhos relativos e absolutos são interpretados pelo navegador.
Quando você usa o caminho /imagens/foco.png, o navegador interpreta isso como um caminho absoluto, começando do diretório raiz do servidor. Isso pode não funcionar dependendo de como seu projeto está estruturado ou de onde ele está sendo servido.
Por outro lado, ao modificar para ./imagens/foco.png, você está especificando um caminho relativo, que diz para o navegador olhar no diretório atual (onde o arquivo HTML ou JavaScript está localizado) e então entrar na pasta imagens para buscar o arquivo foco.png. Isso geralmente resolve o problema quando o projeto não está na raiz do servidor ou quando estamos trabalhando localmente.
No mais agradeço a sua observação e por compartilhar ela conosco!
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!