Ändern Sie programmgesteuert die src eines img-Tags

242

Wie kann ich das srcAttribut eines imgTags mit Javascript ändern ?

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

Zuerst habe ich einen Standard-Quellcode, der "../template/edit.png" ist, und ich wollte ihn mit "../template/save.png" onclick ändern.

AKTUALISIERT: Hier ist mein HTML-Klick:

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

und mein JS

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

Ich habe versucht, dies in edit () einzufügen, es funktioniert, aber ich muss zweimal auf das Bild klicken

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

Antworten:

307

Geben Sie Ihrem img-Tag eine ID, dann können Sie

document.getElementById("imageid").src="../template/save.png";
Matthias
quelle
16
Für einfache Dinge wie das Festlegen des Werts einer Eingabe oder das Ändern eines Bild-src ( insbesondere wenn Sie Elemente mit IDs verwenden) sollten Sie wirklich versuchen, jQuery zu vermeiden, da der Aufruf so viel langsamer ist als der reine JS-Aufruf
Brian Leishman
2
@ william44isme und unsere Seite wird langsamer als zuvor geladen. Ich denke, die jQuery ist nur für Websites nützlich, die denselben Code verwenden, sehr viel mehr. Zum Beispiel, wenn wir den obigen Code mehr als 30 oder 50 Mal verwenden.
Daher ist
62

Sie können sowohl die jquery- als auch die javascript-Methode verwenden: Wenn Sie beispielsweise zwei Bilder haben:

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

1) Abfragemethode->

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

2) Javascript-Methode->

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

Für diese Art von Problem ist jquery einfach zu verwenden.

chandanjha
quelle
21
Das Poster zeigte nie Interesse an einer jQuery-Lösung. Die jQuery-Methode ist auch nicht einfacher. Beantworten Sie keine JS-Fragen mit jQuery-Lösungen (es sei denn, der Beitrag gibt an, dass dies gewünscht wird). Es verwirrt nur Leute, die versuchen, JS zu lernen.
MetaColin
6
getElementByClassName gibt die Auflistung aller Elemente zurück. Wir müssen auch den Index des Elements erwähnen. var image = document.getElementsByClassName ("image2") [0]; image.src = "image1.jpg"
Tushar Gaurav
34

Wenn Sie die JQuery-Bibliothek verwenden, verwenden Sie diese Anweisung:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
quelle
24
Die Frage fragt nicht nach einer jQuery-Antwort, enthält kein jQuery-Tag oder schlägt vor, dass die Verwendung von jQuery in Ordnung ist.
Popnoodles
10
Es macht keinen Sinn, den Leuten zu sagen, dass sie jQuery verwenden sollen, wenn eine äquivalente Funktion direkt in Javascript integriert ist. Für jede JS-Frage ist keine jQuery-Antwort erforderlich. Diese Lösung ist ein Kludge, der verhindert, dass Leute lernen, was Vanilla JS bereits kann.
MetaColin
27

jetzt ist es ok

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
quelle
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
quelle
Inline JS ist nicht gerade eine gute Idee.
FluorescentGreen5
7

In diesem Fall müssen Sie srckeine Funktion aufbauen , da Sie den ersten Wert Ihres Elements ändern möchten . Sie können dieses Recht im Element ändern:

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

Sie haben mehrere Möglichkeiten, dies zu tun. Sie können auch eine Funktion erstellen, um den Prozess zu automatisieren:

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

Dann kannst du:

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

Mit dem von Ihnen bereitgestellten Snippet (und ohne Annahmen über die Eltern des Elements zu treffen) können Sie einen Verweis auf das Bild mit erhalten

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

und ändern Sie die src mit 

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

So können Sie mit den gewünschten Effekt erzielen 

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

Andernfalls ist es, wie von anderen vorgeschlagen, besser, iddem Bild eine zuzuweisen, mit der Sie eine Referenz erhalten , wenn Sie die Kontrolle über den Code haben getElementById(da dies die schnellste Methode zum Abrufen eines Elements ist).

Fabrizio Calderan
quelle
6

Geben Sie Ihrem Bild eine ID. Dann können Sie dies in Ihrem Javascript tun.

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

Mit der Methode ".___" können Sie den Wert eines beliebigen Attributs eines Elements ändern.

Ben
quelle