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

Minhas imagens não estão aparecendo.

Boa tarde, as imagens do meu projeto não estão querendo aparecer na página.

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Meu código Javascript

const html = document.querySelector('html')
const focoBt = document.querySelector('.app__card-button--foco')
const curtoBt = document.querySelector('.app__card-button--curto')
const longoBt = document.querySelector('.app__card-button--longo')
const banner = document.querySelector('.app__image')

focoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'foco')
    banner.setAttribute('src', '/imagens/foco.png')
})


curtoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-curto')
    banner.setAttribute('src', '/imagens/descanso-curto.png')
})

longoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-longo')
    banner.setAttribute('src', '/imagens/descanso-longo.png')
})

Link do meu projeto no Github: https://github.com/Carloshbfreire/Fokus-projeto-base/tree/main

Alguém poderia me ajudar?

3 respostas

Boa Noite!!

Tudo bem por aí? , bom sábado!

Já verificou se suas imagens estão no mesmo diretório raiz?

Já tentou colocar o caminho absoluto, saindo da raiz do projeto usando ./ ?

O repositório github, retorna para aqui mesmo ou seja está retornando para essa mesma página do forum

Sucesso.

Carlos, a mesma coisa aconteceu comigo. Só resolveu quando tirei a barra antes do caminho das imagens, por exemplo:

'imagens/foco.png' em lugar de '/imagens/foco.png'

Ao inspecionar a página antes de inserir qualquer código javascript, tbm percebi que o console indicava erro no caminho das imagens, o que foi resolvido quando tirei a barra. Só não sei pq isso acontece...

solução!

É verdade consegui resolver fazendo o que você indicou, muito obrigado.