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

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

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

Novo subtítulo: ‘Alterando o src direto pela propriedade .src:’

Tem um jeito ainda mais curto de fazer a mesma coisa, acessando a propriedade src direto do elemento

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

img.src = "outra_imagem.png";

Pronto, mesmo resultado do setAttribute, só que mais enxuto

Esse é o modo mais usado no dia a dia quando tu só quer trocar a imagem rápido, sem pensar muito

Novo subtítulo: ‘Qual a diferença entre .src e setAttribute?’

Na prática, os dois trocam a imagem do mesmo jeito

A propriedade .src é mais direta e legível pra quando tu já sabe que o alvo é a imagem

Já o setAttribute é mais genérico, serve pra QUALQUER atributo (src, alt, class, id e por aí vai)

Ou seja: se é só o src, o .src resolve fácil; se tu vai mexer em vários atributos, o setAttribute te dá mais flexibilidade

Novo subtítulo: ‘Como pegar o src atual da imagem?’

As vezes, antes de trocar, tu quer saber qual imagem tá ali agora

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

console.log(img.src);

Se liga nisso: ao LER o img.src o navegador te devolve o caminho completo (a URL absoluta), e não o "teste.jpg" cru que tu escreveu no HTML

Já me pegou uma vez esperando a string curtinha e vindo a URL inteira, então fica esperto

Novo subtítulo: ‘Trocando a imagem em um clique:’

Na vida real tu quase nunca troca a imagem do nada, no geral é depois de uma ação, tipo um clique

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

var botao = document.querySelector("#trocar");

botao.addEventListener("click", function() { img.src = "outra_imagem.png"; });

Aí quando o usuário clica no botão, a imagem muda na hora

Bora testar no teu HTML?