Cambie programáticamente el src de una etiqueta img

242

¿Cómo puedo cambiar el srcatributo de una imgetiqueta usando javascript?

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

al principio tengo un src predeterminado que es "../template/edit.png" y quería cambiarlo con "../template/save.png" al hacer clic.

ACTUALIZADO: aquí está mi html onclick:

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

y mi JS

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

He intentado insertar esto dentro de la edición (), funciona pero necesito hacer clic en la imagen dos veces

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

Respuestas:

307

Dele a su etiqueta img una identificación, luego puede

document.getElementById("imageid").src="../template/save.png";
Matías
fuente
16
Para cosas simples como establecer el valor de una entrada o cambiar un src de imagen ( especialmente cuando está usando elementos que tienen ID), realmente debe intentar evitar jQuery, ya que la llamada es mucho más lenta que la llamada JS pura
Brian Leishman
2
@ william44isme y nuestra página se cargará más lentamente que antes. Creo que jQuery es útil solo para sitios web que usan un mismo código, mucho más. por ejemplo, si usamos el código anterior más de 30 o 50 veces. así que es necesario usar jQuery
Mahdi Jazini
62

Puede usar el método jquery y javascript: si tiene dos imágenes, por ejemplo:

<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 este tipo de problema, jquery es el más simple de usar.

chandanjha
fuente
21
El póster nunca indicó ningún interés en una solución jQuery. El método jQuery tampoco es más simple. No responda las preguntas de JS con soluciones jQuery (a menos que la publicación indique que lo desean). Simplemente confunde a las personas que intentan aprender JS.
metaColin
66
getElementByClassName devuelve la colección de todos los elementos. También debemos mencionar el índice del elemento. var image = document.getElementsByClassName ("image2") [0]; image.src = "image1.jpg"
Tushar Gaurav el
34

si usa la biblioteca JQuery use esta instrucción:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
fuente
24
La pregunta no pide una respuesta jQuery, incluye una etiqueta jQuery ni sugiere que está bien usar jQuery.
Popnoodles
10
Decirle a la gente que use jQuery cuando una función equivalente está integrada en Javascript no tiene sentido. Cada pregunta JS no requiere una respuesta jQuery. Esta solución es un error que impide que las personas se enteren de lo que Vanilla JS ya puede hacer.
metaColin
27

ahora está bien

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
fuente
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
fuente
Inline JS no es exactamente una gran idea.
FluorescentGreen5
7

En este caso, como desea cambiar el srcprimer valor de su elemento, no necesita construir una función. Puede cambiar esto directamente en el elemento:

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

Tienes varias formas de hacer esto. También puede crear una función para automatizar el proceso:

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

Entonces tú puedes:

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

Con el fragmento que proporcionó (y sin hacer suposiciones sobre los padres del elemento) podría obtener una referencia a la imagen con

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

y cambiar el src con 

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

para que puedas lograr el efecto deseado con 

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

de lo contrario, como otros sugirieron, si tiene el control del código, es mejor asignarle ida la imagen una referencia getElementById(ya que es el método más rápido para recuperar un elemento)

Fabrizio Calderan
fuente
6

Dale a tu imagen una identificación. Entonces puedes hacer esto en tu javascript.

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

Puede usar el método ".___" para cambiar el valor de cualquier atributo de cualquier elemento.

Ben
fuente