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

alterar o src de uma imagem com JavaScript capa

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

Inscrever-se
Notificar de
guest

7 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
alex flores

Muito bom!!
Isso com o ajax é show de bola!

Battisti

valeu!!

MessiasTrick

Muito obrigado!

Battisti

de nada Messias!

Allan

podemos fazer também de forma mais simples:
img.src = ‘novaimagem.jpg’

Battisti

boa Allan!

Caetano

Olá, deu certo aqui, mas como faço para a imagem retornar depois? estou colocando isso em um menu, e ao clicar no icone a imagem muda e abre as opções de menu, mas quando clico de novo a segunda imagem permanece e o as opções sobem (o que está certo, o problema é a primeira imagem não voltar )