Alterar programaticamente o src de uma tag img

242

Como posso alterar o srcatributo de uma imgtag usando javascript?

<img src="../template/edit.png" name=edit-save/>

a princípio, tenho um src padrão que é "../template/edit.png" e queria alterá-lo com "../template/save.png" onclick.

ATUALIZADO: aqui está o meu html onclick:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

e meu JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

Eu tentei inserir isso dentro do edit (), ele funciona, mas precisa clicar na imagem duas vezes

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }
javascript html image src Jam Ville
fonte

Respostas:

307

Dê um ID à sua tag img, e você poderá

document.getElementById("imageid").src="../template/save.png";
Matthias
fonte
16
Para coisas simples, como definir o valor de uma entrada ou alterar uma imagem src ( especialmente quando você estiver usando elementos que possuem IDs), tente evitar o jQuery, pois a chamada é muito mais lenta que a chamada JS pura
Brian Leishman
2
@ william44isme e nossa página será carregada mais lentamente do que antes. Eu acho que o jQuery é útil apenas para sites que usam o mesmo código, muito mais. por exemplo, se usarmos o código acima mais de 30 ou 50 vezes. então é necessário usar o jQuery
Mahdi Jazini 30/11
62

Você pode usar os métodos jquery e javascript: se você tiver duas imagens, por exemplo:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) Método Jquery->

$(".image2").attr("src","image1.jpg");

2) Método Javascript->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

Para esse tipo de problema, o jquery é simples de usar.

chandanjha
fonte
21
O pôster nunca indicou qualquer interesse em uma solução jQuery. O método jQuery também não é mais simples. Não responda a perguntas de JS com soluções jQuery (a menos que a postagem indique que eles querem isso). Apenas confunde as pessoas que tentam aprender JS.
MetaColin>
6
getElementByClassName retorna a coleção de todos os elementos. Também precisamos mencionar o índice do elemento. var imagem = document.getElementsByClassName ("imagem2") [0]; image.src = "image1.jpg"
Tushar Gaurav
34

se você usar a biblioteca JQuery, use esta instrução:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
fonte
24
A pergunta não pede uma resposta do jQuery, inclui uma tag jQuery ou sugere que não há problema em usar o jQuery.
Popnoodles
10
Dizer às pessoas para usar o jQuery quando uma função equivalente é incorporada diretamente ao Javascript não faz sentido. Toda pergunta JS não requer uma resposta jQuery. Esta solução é um argumento que impede as pessoas de aprender sobre o que o vanilla JS já pode fazer.
MetaColin>
27

está tudo bem agora

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}
Jam Ville
fonte
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
fonte
JS embutido não é exatamente uma ótima idéia.
FluorescentGreen5
7

Nesse caso, como você deseja alterar o srcprimeiro valor do seu elemento, não é necessário criar uma função. Você pode alterar isso diretamente no elemento:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Você tem várias maneiras de fazer isso. Você também pode criar uma função para automatizar o processo:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

Então você pode:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>
Marcelo Camargo
fonte
6

Com o snippet que você forneceu (e sem fazer suposições sobre os pais do elemento), você pode obter uma referência à imagem com

document.querySelector('img[name="edit-save"]');

e mude o src com 

document.querySelector('img[name="edit-save"]').src = "..."

para que você possa obter o efeito desejado com 

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

caso contrário, conforme sugerido, se você estiver no controle do código, é melhor atribuir um idà imagem e obter uma referência getElementById(já que é o método mais rápido para recuperar um elemento)

Fabrizio Calderan
fonte
6

Dê um ID à sua imagem. Então você pode fazer isso no seu javascript.

document.getElementById("blaah").src="blaah";

Você pode usar o método ".___" para alterar o valor de qualquer atributo de qualquer elemento.

Ben
fonte