Mostrar imagen con JavaScript
JavaScript se conoce como el lenguaje de desarrollo web. Al usar JavaScript, podemos hacer que nuestra página web sea atractiva insertando imágenes en ella.
Por defecto, usamos la etiqueta <img> en HTML para mostrar imágenes. En la etiqueta <img>, tenemos un método conocido como src, que ayuda a obtener la fuente de la imagen que le dimos a mostrar. En el src, tenemos que dar la ruta completa de la imagen; de lo contrario, generará un error. También es necesario especificar el ancho y alto de la imagen.
JavaScript tiene su propia etiqueta img, que nos ayuda a insertar una imagen en nuestra página web. Podemos crear una función reutilizable. Aquí usaremos el elemento img nuevamente pero de manera diferente.
Crearemos una función llamada display_image(), que constará de parámetros como source, width, height y alt de una imagen en ella. Usaremos un createElement() para crear un elemento en la función. De esta manera, podemos mostrar imágenes dinámicamente donde sea que llamemos a esta función.
Por ejemplo,
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function display_image(src, width, height, alt) {
var a = document.createElement("img");
a.src = src;
a.width = width;
a.height = height;
a.alt = alt;
document.body.appendChild(a);
}
display_image('JavaScript.jpg',
276,
110,
'JavaScriptImage');
</script>
</body>
</html>
Producción:
El ejemplo anterior muestra una imagen en la página web basada en la fuente proporcionada. La función document.body.appendChild() agrega el elemento dado al cuerpo de la página web.