Como alterar src de imagem com JavaScript

Neste artigo você vai aprender a como alterar src de imagem com JavaScript, utilizando uma abordagem muito fácil!

Fala programador(a), beleza? Bora aprender mais sobre imagens em JavaScript!

Muitas vezes precisamos alterar a imagem que está sendo exibida em uma página web, seja para mudar a imagem de um banner, trocar uma imagem de perfil ou até mesmo para fazer uma espécie de slideshow.

E a boa notícia é que isso é bem simples de ser feito com JavaScript.

Para alterar a imagem, primeiro precisamos pegar a referência da imagem em questão. Isso pode ser feito de várias maneiras, mas a mais comum é utilizando o método getElementById da seguinte forma:

const minhaImagem = document.getElementById("minha-imagem");

Aqui, estamos pegando a imagem cujo o id é “minha-imagem”. Isso é feito utilizando uma tag img no HTML, da seguinte forma:

<img src="caminho/da/imagem.jpg" id="minha-imagem" alt="Minha imagem">

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Agora que temos a referência da imagem, podemos alterar a sua src (que é o caminho da imagem) utilizando a seguinte sintaxe:

minhaImagem.src = "caminho/da/nova/imagem.jpg";

Simples, né? Agora basta chamar essa linha de código quando quisermos alterar a imagem.

Outra forma de alterar a imagem com JavaScript

Outra forma de alterar a imagem é utilizando o método setAttribute da seguinte forma:

minhaImagem.setAttribute("src", "caminho/da/nova/imagem.jpg");

Esse método serve para alterar qualquer atributo de uma tag HTML, não só a src da imagem.

Você pode utilizá-lo para alterar qualquer outro atributo, como alt, title, class, etc.

Um detalhe importante é que, se você estiver alterando a imagem a partir de um evento, como um clique em um botão, é importante adicionar o código para alteração da imagem dentro de uma função.

Por exemplo:

function trocarImagem() {
  minhaImagem.src = "caminho/da/nova/imagem.jpg";
}

document.getElementById("meu-botao").addEventListener("click", trocarImagem);

Aqui, criamos uma função chamada trocarImagem que altera a imagem e, em seguida, adicionamos um evento de clique ao elemento cujo o id é “meu-botao”.

Quando o usuário clicar no botão, a função será chamada e a imagem será alterada.

Como fazer um slideshow com JavaScript

Mas e se quisermos fazer um slideshow?

Podemos utilizar uma estrutura de repetição, como um for ou um while, para percorrer um array de imagens e alterar a src a cada certo tempo. Por exemplo:

const imagens = ["imagem1.jpg", "imagem2.jpg", "imagem3.jpg"];
let i = 0;

function trocarImagem() {
  minhaImagem.src = imagens[i];
  i++;

  if (i >= imagens.length) {
    i = 0;
  }
}

setInterval(trocarImagem, 2000); // Troca a imagem a cada 2 segundos

Nesse código, criamos um array chamado imagens com os caminhos das imagens que queremos exibir.

Em seguida, criamos uma função chamada trocarImagem que altera a src da imagem para a imagem atual do array e incrementa o índice i.

Quando o índice ultrapassar o tamanho do array, ele é resetado para zero.

Por fim, utilizamos o método setInterval para chamar a função trocarImagem a cada 2 segundos (2000 milissegundos)

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu várias abordagens de como alterar src de imagem com JavaScript

Agora basta escolher a que gostou mais, e aplicar no seu código!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Pegando a imagem com querySelector

O getElementById resolve, mas nem sempre a imagem tem um id

Se você quer pegar por classe, por atributo ou por qualquer seletor de CSS, o querySelector é teu amigo

Funciona assim:

const minhaImagem = document.querySelector(".minha-imagem");

minhaImagem.src = "caminho/da/nova/imagem.jpg";

Repara que dentro do querySelector tu escreve igual escreveria no CSS: ponto pra classe, cerquilha pra id

Depois de pegar a referência, o resto é idêntico: tu altera o .src normalmente

Se a página tiver várias imagens com a mesma classe e tu quiser todas, aí é querySelectorAll e um loop pra percorrer, mas pra trocar uma imagem só o querySelector já dá conta =)

Como ler o valor atual da src

Até agora a gente só escreveu na src, mas dá pra ler também

É útil quando tu quer saber qual imagem está aparecendo antes de trocar, tipo um botão que alterna entre duas imagens

Basta acessar a propriedade sem o sinal de igual:

const caminhoAtual = minhaImagem.src;

console.log(caminhoAtual);

Um detalhe que já me pegou: quando tu lê o .src, o navegador costuma devolver o caminho completo (a URL absoluta), e não exatamente o texto que tu escreveu no HTML

Se tu precisa do valor cru, do jeitinho que está escrito na tag, usa o getAttribute:

minhaImagem.getAttribute("src");

Assim tu compara com o que espera sem surpresa

Minha imagem não muda, e agora?

Se tu rodou o código e a imagem continua igual, calma, quase sempre é uma dessas coisas

O caminho está errado: confere se o caminho da nova imagem existe de verdade e se a pasta bate. Um jeito rápido é abrir o console do navegador e ver se aparece erro de imagem não encontrada

A referência veio vazia: se o getElementById ou querySelector não achou o elemento, minhaImagem fica null e a troca não acontece. Isso costuma rolar quando o script roda antes do HTML carregar. A saída é colocar o script no fim do body ou esperar a página carregar antes de mexer

O id ou a classe não bate: um errinho de digitação no nome já é suficiente pra não pegar nada. Confere letra por letra

Tome cuidado com maiúscula e minúscula também, pra JavaScript minha-imagem e Minha-Imagem são coisas diferentes