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

[DUVIDA] As imagens não estão aparecendo

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')
})

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oi Christofferson, tudo bem?

Você esqueceu de adicionar um ponto antes do nome da classe app__image. Então corrige pra:

const banner = document.querySelector('.app__image')

E também verifica se os caminhos das imagens tão corretos, porque vi que você não usou a / antes do caminho da imagem como a pessoa instrutora faz no curso. Por exemplo assim:

banner.setAttribute('src', '/imagens/foco.png')

Esses pequenos detalhes podem fazer a diferença.

E sempre importante lembrar de verificar se as imagens foco.png, descanso-curto.png e descanso-longo.png estão na pasta "imagens" e que os nomes estejam escritos corretamente, incluindo a extensão do arquivo.

Por favor, faça essas modificações e verificações e nos diga se deu certo ou não.

Um abraço e bons estudos.

Boa noite. Consegui arrumar, obrigado!