Bom dia!
As imagens só apareceram depois de tirar o '/' por exemplo "banner.setAttribute('src', 'imagens/descanso-curto.png')" ?
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')
})
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!