1
resposta

[Sugestão] Alteração da imagem dentro da função alterarContexto

Olá pessoal, tudo bem?
Tive dificuldade em enteder a causa raiz do problema de não carregar a imagem na implementação da função alterarContexto.
Como resolvi:
Antes:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Depois:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Detalhes(pesquisa):
No JavaScript, crases ( ) são usadas para **Template Literals** (ou Template Strings), que permitem quebras de linha literais e a incorporação de expressões (usando ${variável}) dentro da string [3, 12]. Já aspas simples (' ') e aspas duplas (" ") são usadas para definir strings literais mais básicas, onde, para o JavaScript, não há diferença funcional entre elas

Espero ter ajudado

1 resposta

Oi, Anderson, tudo bem?

Agradeço por compartilhar sua dúvida e, principalmente, a solução que encontrou! Com certeza vai ajudar outros alunos e alunas que passarem pela mesma dificuldade.

Sua análise está perfeita! O problema no código original é exatamente o uso das aspas simples (' '). Ao escrever './imagens/${contexto}.png', o JavaScript interpreta ${contexto} como um texto literal, e não como a variável que deveria ser inserida ali.

A sua correção, utilizando a crase () para criar um *Template Literal*, é a solução ideal, pois permite que a variável contexto seja corretamente interpretada e seu valor (foco, descanso-curto`, etc.) seja inserido na string, formando o caminho correto da imagem.

Excelente observação e iniciativa de pesquisar e compartilhar a solução de forma tão clara.

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade