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">

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!