Como trocar uma imagem com JavaScript

Neste artigo você vai aprender a como trocar uma imagem com JavaScript, de uma maneira simples trocar o src e mudar a imagem

Fala programador(a), beleza? Bora aprender mais sobre como manipular uma imagem com JavaScript

A forma de realizar a troca de uma imagem com JS é bem simples, apenas precisamos trocar um atributo que é o src

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Este atributo que controla qual imagem está sendo exibida no nosso HTML, então precisamos mudá-lo para a imagem nova

Veja um exemplo:

<img id="image" src="teste.jpg">

Este será o nosso HTML de tag img, agora veja o JS necessário para fazer a troca:

var img = document.querySelector("#image");

img.setAttribute('src', 'outra_imagem.png');

Desta maneira vamos trocar a imagem teste.png para outra_imagem.png

Não tem muito mistério, apenas o fato de manipular o atributo com o método setAttribute já é o suficiente

Podemos também alterar o atributo alt com este método, deixando uma texto alternativo mais fiel a imagem a ser apresentada quando há a troca

Precisamos apenas aplicar o setAttribute agora ao atributo alt, e pronto

A mesma lógica segue para os outros atributos de elementos do HTML, como: ids, classes e todos os outros

Conclusão

Neste artigo vimos como trocar uma imagem com JavaScript

Apenas precisamos alterar o atributo src com o método setAttribute do JS

Assim a nova imagem tomará o local da imagem antiga, apenas por trocar o atributo

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube