Cómo cambiar el src de un elemento en JavaScript?

JavaScript | Cambiando src de un elemento : Aquí, vamos a aprender cómo cambiar el src de un elemento en JavaScript?

Sabemos que el img etiqueta en HTML tiene un src atribuido asociado con éste, que especifica la fuente de la imagen, la URL o la ruta a esa imagen. Podemos cambiar fácilmente usando JavaScript y en este artículo, vamos a explorar cómo y un importante uso class de esta característica.

un tutorial rápida que los conjuntos o devoluciones de propiedad src el valor de la src atributo de una imagen mediante la img etiqueta . Se puede cambiar fácilmente en cualquier momento usando JS sin embargo, la nueva imagen de src especificada heredará la altura y la anchura de la imagen que se utilizó antes a no ser que estas propiedades se mencione lo contrario.

Imagínese que ha hecho clic en una imagen nueva y quiere cambiar su imagen de perfil en Facebook. Su perfil de Facebook puede ser imaginado como una página HTML con una etiqueta img que representa su foto de perfil. Al cargar una nueva imagen y haga clic en subir, facebook realmente cambia el src de la imagen de perfil de la nueva imagen que ha cargado! Vamos a construir algo de este tipo ahora,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: blueviolet;
}
.card {
height: 700px;
width: 400px;
}
.card-image img {
height: 400px;
width: 200px;
}
.upload {
position: relative;
top: -600px;
border: 2px solid salmon;
padding: 20px;
background: salmon;
}
</style>
<body>
<h1 class="center white">Social Media</h1>
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img class="profile-pic" src="https://images-na.ssl-images-amazon.com/images/I/71wiruqIZ9L._SY606_.jpg" alt="">
</div>
<div class="card-content">
<h3>Ninja Turtle</h3>
<h4>From Los Angeles</h4>
<p>Likes painting and playing banjo. Wanna jam? Connect with me at [email protected].com</p>
</div>
</div>
</div>
</div>
<div class="right upload">
<h4 class="white-text">Change your profile image:</h4>
<input type="text" placeholder="url of new image" id="url">
<button class="btn white center black-text">Change</button>
</div>
</div>
</body>
<script>
</script>
</html>

salida

How to change the src of an element in JavaScript? - 4

Tenemos una etiqueta de entrada a la derecha que se llevará en la dirección URL de la nueva imagen para ser cargado. Al hacer clic en el botón de cambio que necesitamos para disparar un detector de eventos la que se agarra el valor del campo de entrada y poner esa URL como la fuente de la imagen dentro img etiqueta de nuestra tarjeta de perfil. ¿Tiene sentido?

<script>
document.querySelector('.btn').addEventListener('click',()=>{
const url=document.querySelector('#url').value;
console.log(url);
document.querySelector('.profile-pic').src=url;
})
</script>

salida

How to change the src of an element in JavaScript? - 5

Así al hacer clic en el cambio cambiamos el éxito src nuestra imagen! impresionante.

Este cómo puede cambiar la fuente de un elemento utilizando JavaScript? Y, usar esa funcionalidad en una serie de aplicaciones.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *