Cambiar programáticamente el SRC de una etiqueta IMG

Al diseñar una interfaz de usuario interactiva, puede haber un requisito para agregar y eliminar ciertas imágenes de vez en cuando para involucrar al usuario. Por ejemplo, agregar múltiples imágenes para dar al usuario una mejor comprensión del concepto o la creación de efectos. En tales situaciones, cambiando el SRC de un "img"La etiqueta asiste programáticamente en hacer que un sitio se destaque.

Este artículo describirá los enfoques para cambiar el SRC de una etiqueta IMG programáticamente.

Cómo cambiar/reemplazar programáticamente el SRC de una etiqueta IMG?

Para cambiar el SRC de una etiqueta IMG programáticamente, aplique los siguientes enfoques:

• "SRC" atributo.
• JQuery's "attr ()" método.

Método 1: Cambie programáticamente el SRC de una etiqueta IMG usando el atributo SRC

El "SRC"El atributo especifica la URL de un archivo externo. Este enfoque puede hacer la transición de la imagen asignada con una nueva.

Ejemplo
Vamos a ver las líneas de código establecidas a continuación:

Cambiar

En el fragmento de código anterior:

• En primer lugar, especifique la imagen en el ""Etiqueta a través del"SRC" atributo.
• Después de eso, cree un botón con un adjunto "al hacer clic"Evento invoca la función myFunction ().
• Ahora, en el código JavaScript, defina la función llamada "myFunction ()". En su definición, redirige la imagen especificada por su ID con la ayuda del "getElementById ()" método.
• Por último, asigne una nueva ruta a la imagen de acceso con la ayuda del "SRC" atributo.
• Esto cambiará como cambio la imagen agregada en el activador del botón.

Producción

En la salida anterior, se puede observar que la imagen especificada se cambia con una nueva imagen al hacer clic en el botón.

Método 2: Cambiar programáticamente el SRC de una etiqueta IMG a través de jQuery

JQuery's "attr ()El método se utiliza para establecer o devolver los atributos y los valores de los elementos seleccionados. Este método se puede aplicar para cambiar el SRC de una etiqueta IMG asignando una nueva ruta a la imagen obtenida.

Sintaxis

$ (selector).attr (atributo, valor);

Aquí:

• "atributo"Indica el nombre del atributo.
• "valor"Corresponde al nuevo valor del atributo.

Ejemplo
Pasemos a las líneas de código:

Cambiar

En el bloque de código anterior:

• Del mismo modo, incluya una imagen usando el "SRC"Atributo que tiene el declarado"identificación".
• En la siguiente línea, cree un botón para adjuntar un "al hacer clic"Evento que invocará la función"myFunction ()".
• Ahora, especifique la biblioteca jQuery usando el "SRC" atributo.
• En el código JS, declare una función llamada "myFunction ()".
• En su definición, acceda a la imagen especificada y asigne una nueva ruta a través del "attr ()" método.
• Como resultado, la imagen se realizará en el clic del botón.

Producción

Se puede ver que la imagen se ha cambiado en el disparador del botón.

Conclusión

Para cambiar/reemplazar el SRC de una etiqueta IMG programáticamente usando JavaScript, aplique el "SRC"Atributo o jQuery"attr ()" método. Estos enfoques se pueden utilizar para obtener simplemente la imagen especificada y la transición con la ayuda de un atributo predefinido y un método, respectivamente. Este artículo ilustra los enfoques para cambiar/reemplazar el SRC de una etiqueta IMG programáticamente.