Como alterar o src de uma imagem com JavaScript

Neste artigo você vai aprender como alterar o src de uma imagem com JavaScript, de uma maneira simples, para trocar a imagem do seu HTML

Fala programador(a), beleza? Bora aprender a como mudar uma imagem no nosso HTML alterando o atributo src

A ideia é bem simples, vamos utilizar um método chamado setAttribute no elemento da imagem

E então passamos dois argumentos para ele:

• O nome do atributo;
• O novo valor do atributo;

Desta maneira podemos alterar a imagem facilmente da página, apenas mudando o src dela

Veja um exemplo prático:

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

Este é o nosso HTML, uma imagem com id de image, agora veja o JS:

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

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

Sem mistérios, alteramos o atributo src via o método setAttribute e assim temos a mudança de uma imagem

Outra informação importante é que podemos alterar qualquer outro atributo do nosso projeto

Ou seja, é possível alterar: classes, ids, names e alts

Não importa o atributo, o método setAttribute fará a mudança do mesmo

Conclusão

Neste artigo vimos como alterar o src de 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