A imagem nao aparece

O ambiente em que estou codando é Ubuntu e também tive o mesmo problema. Precisei colocar o "." antes do endereço .... o exemplo do meu endereço ficou: banner.setAttribute('src', './imagens/foco.png');

A dúvida é sobre a diferença entre codar em S.O. Linux (Ubuntu) e Windows. O que deve ir para o ambiente de produção ? Endereço direto, como o da aula, ou endereço relativo como aconteceu comigo e o colega Carlos ?

Deixei o comentário como resposta mas estou junto na dúvida.... Se alguém puder ajudar eu agradeço.

Oi Carlos, tudo bem?

O uso do caminho relativo ou absoluto depende da estrutura do seu projeto e da localização dos arquivos que você está referenciando. Vou explicar a diferença entre os dois caminhos e como eles funcionam.

1. Caminho relativo: Um caminho relativo é especificado em relação à localização do arquivo HTML atual. Quando você usa um caminho relativo, você está indicando o caminho para o arquivo em relação ao arquivo HTML em que o código está sendo executado.

No exemplo que você deu, onde o caminho relativo funcionou, o código banner.setAttribute('src', 'imagens/foco.png') indica que a imagem está localizada na pasta "imagens" que está no mesmo diretório do arquivo HTML atual. Portanto, o caminho relativo é válido e a imagem é exibida corretamente.

1. Caminho absoluto: Um caminho absoluto é especificado a partir da raiz do sistema de arquivos ou do diretório base do servidor. Ele começa com uma barra (/) para indicar a raiz do sistema de arquivos.

No exemplo que você deu, onde o caminho absoluto não funcionou, o código banner.setAttribute('src', '/imagens/foco.png') indica que a imagem está localizada na pasta "imagens" na raiz do sistema de arquivos. Se a imagem não estiver realmente localizada nesse caminho absoluto, ela não será encontrada e não será exibida corretamente.

Portanto, se o caminho absoluto não está funcionando, é provável que a localização da imagem não esteja correta em relação à raiz do sistema de arquivos.

É preciso se certificar de que a estrutura de diretórios do seu projeto está correta e que a imagem está realmente localizada no caminho absoluto que você está especificando. Caso contrário, o uso do caminho relativo é uma abordagem mais flexível, pois permite que o código funcione independentemente da localização do arquivo HTML em relação ao sistema de arquivos.

Um abraço e bons estudos.

@Ronaldo

A diferença entre codificar em um sistema operacional Linux (como o Ubuntu) e no Windows geralmente não afeta o endereço que você deve usar em um ambiente de produção. A escolha entre usar um endereço direto ou um endereço relativo depende da estrutura do seu projeto e de como os arquivos estão organizados.

Ao especificar o caminho para um recurso (como uma imagem) em um ambiente de produção, você geralmente deve usar um endereço relativo. Isso garante que o caminho seja válido, independentemente do sistema operacional em que o servidor esteja sendo executado e utilizando um caminho relativo, você está indicando o caminho para o recurso em relação ao arquivo HTML que está solicitando o recurso. Essa abordagem é mais flexível, pois permite que o código funcione corretamente, independentemente da localização do arquivo HTML no sistema de arquivos.

Em ambientes de produção, é recomendável usar endereços relativos para especificar o caminho dos recursos do seu projeto, como imagens, arquivos CSS, JavaScript, etc. Dessa forma, seu código será portável e funcionará corretamente em diferentes sistemas operacionais. No seu exemplo específico, o uso do caminho relativo banner.setAttribute('src', './imagens/foco.png') indica que a imagem está localizada na pasta "imagens" no mesmo diretório do arquivo HTML atual. Essa é uma abordagem adequada no ambiente de produção, pois o caminho relativo garante a correta resolução do caminho, independentemente do sistema operacional.