Todos estamos familiarizados con las funciones y sus parámetros y, a menudo, usamos strings, enteros, objetos, arrays como parámetro en las funciones de JavaScript, pero ahora veremos cómo pasar una imagen como parámetro en la función de JavaScript. Usaremos JavaScript vainilla aquí.
Primero, cree una función que reciba un parámetro y luego llame a esa función. El parámetro debe ser una string que haga referencia a la ubicación de la imagen.
Sintaxis:
function displayImage (picUrl) {
...
}
displayImage('/assets/myPicture.jpg')
Ejemplo: En este ejemplo, mostraremos una imagen dentro de un DIV cuyo id es «imgDiv».
<div id="imgDiv">
<!-- Here we show the picture -->
</div>
Pasos:
- Primero, cree un marcado que tenga un h1 y una etiqueta div cuyo id sea imgDiv en el que vamos a insertar la imagen.
- Crea una etiqueta de script en la que todos vamos a hacer todas nuestras lógicas.
- Cree una variable llamada divLocation y asigne el elemento DOM de ese div a la variable.
- Ahora crea un elemento img con document.createElement() y asígnalo a la variable imgElement.
- Luego asigne la URL de la imagen a su atributo href usando imgElement.href = /ubicación de la imagen/ .
- Ahora agregue el elemento img al elemento div bymethod.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Hello GFG</h1>
<div id="imgDiv"></div>
</center>
<script>
var Pic = ""
function displayImage(pic) {
let divLocation = document.getElementById("imgDiv");
let imgElement = document.createElement("img");
imgElement.src = pic
divLocation.append(imgElement);
}
Pic =
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg";
displayImage(Pic);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA