Recarregar imagem da mesma URL com JavaScript

Neste artigo você vai aprender a recarregar imagem da mesma URL com JS, esta técnica é utilizada para resolver problemas de cache

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

Há diversas maneiras de resolver a situação de cache de imagens

A mais simples é adicionando um recurso chamado de cache breaker

Inclusive isso pode ser aplicado em arquivos de CSS ou até de JavaScript, então é interessante aprender esta técnica

Veja um exemplo prático:

let img = new Image()

newImage.src = "https://meusite.com.br/imagem.jpg";

// removendo o cache
newImage.src = "https://meusite.com.br/imagem.jpg?" + new Date().getTime();;

Na última linha de código estamos adicionar o cache breaker

Basta adicionar uma ? no fim do caminho da imagem e gerar uma string aleatória, o que pode ser feita com o getTime

Isso consistem em algo do tipo:

"https://meusite.com.br/imagem.jpg?"12312371213

Forçando o carregamento da imagem novamente, sem precisar recarregar a página

Assim temos a nova versão da imagem sendo apresentada no nosso site

Conclusão

No artigo de hoje você aprendeu a como recarregar imagem da mesma URL com JavaScript

Utilizamos um recurso chamado cache breaker

Que consistem em utilizar a mesma URL, porém com uma string aleatória no fim

Isso faz uma nova chamada a imagem e a recarrega sem precisar de um refresh na página

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos