2
respostas

Bug de imagem

Olá professor, boa noite. Acompanhando as aulas o site apresenta problemas comigo, aparece apenas a foto do "Foco" e o resto das imagens não aparece ou elas somem, mesmo seguindo corretamente o video, elas não aparecem e por algum motivo, quando é clicado em "Foco" a imagem do Foco também desaperece. Segue abaixo meu código:

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

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

Olá Fabricio! Como vai?

O problema no seu código pode estar relacionado ao caminho das imagens. Quando usamos src no setAttribute, o caminho precisa estar correto em relação ao arquivo HTML. Se o navegador não encontra as imagens, elas não aparecem. Peço que por favor, siga as orientações do guia de como fazer uma boa pergunta no fórum e se for possível me retorne com mais informações do problema, trazendo o projeto completo de código ou print do caminho das pastas das imagens para que possamos te ajudar de forma mais assertiva e apontar o caminho certo.

Aguardo seu retorno. Um abraço!

Fico no aguardo e à disposição