Cómo mostrar imagen con JavaScript

JavaScript es un lenguaje de secuencia de comandos dinámico utilizado para efectos dinámicos en los sitios web. Además, las páginas web contienen imágenes que usan la etiqueta HTML. A veces, la página tarda mucho en cargarse, por lo que los desarrolladores prefieren agregar imágenes usando etiquetas de imagen JavaScript que se cargan dinámicamente y toman menos tiempo para cargar o mostrar cualquier clic.

Este artículo describirá el proceso para mostrar imágenes usando JavaScript.

Cómo mostrar una imagen con JavaScript?

Para mostrar imágenes con JavaScript, use el "createElement ()Método para crear un nodo de elemento HTML. Para lograr esto, se necesita "img"Como parámetro.

Sintaxis
Para crear un nodo de elemento, use la sintaxis dada:

documento.CreateElement (tipo)

Ejemplo 1: Mostrar imagen con JavaScript
En este ejemplo, no hay necesidad de agregar un código HTML porque agregaremos una imagen usando JavaScript. Para este propósito, escriba el siguiente código en el archivo JavaScript:

función displayImage (src, ancho, altura)
var img = documento.createElement ("img");
img.src = src;
img.ancho = ancho;
img.altura = altura;
documento.cuerpo.appendchild (img);

En el fragmento de código anterior:

• Defina una función "mostrar imagen()"Con fuente de imagen"SRC","ancho", y "altura"Como parámetro.
• Agregue una etiqueta o elemento de imagen en JavaScript utilizando el "createElement ()" método.
• Establezca las propiedades de la imagen como fuente, ancho y altura de una imagen.
• Luego, agregue la imagen al cuerpo HTML usando el "documento.cuerpo.añadir Niño()" método.

Ahora, llame a la función "mostrar imagen()"Y pase la altura, el ancho y la fuente de una imagen como argumento:

DisplayImage ('2.jpg ', 320, 250);

Producción

En el siguiente ejemplo, consulte cómo mostrar una imagen en un botón Haga clic.

Ejemplo 2: Mostrar imagen en el botón Haga clic con la clase CSS
Este ejemplo se trata de cómo se puede usar una clase CSS para mostrar una imagen en JavaScript y cómo aparecerá la imagen cuando se haga clic en el botón. Primero, crearemos un botón en un archivo HTML que llame al "mostrar imagen()"Función cuando se hace clic en el botón:

Hacer clic

Creemos una clase CSS "funciones de imágenes"Para establecer los atributos de la imagen como"longitud", y "ancho"De una imagen:

.funciones de imágenes

Ancho: 320;
Altura: 250;

Defina una función "mostrar imagen()"Con un solo parámetro SRC. Luego, agregue un elemento de imagen usando el método createElement () y establezca la fuente de una imagen. Ahora, agregue la clase "funciones de imágenes"Para configurar los atributos de la imagen utilizando el"Lista de clase.agregar()" método. Finalmente, agregue la etiqueta de imagen en un documento utilizando el "documento.cuerpo.añadir Niño()" método:

función displayImage (src)
var img = documento.createElement ("img");
img.src = src;
img.Lista de clase.agregar ("ImageFeatures");
documento.cuerpo.appendchild (img);

Como puede ver, la imagen se muestra en el botón Haga clic sin ningún retraso:

Hemos mostrado la imagen con la ayuda de JavaScript.

Conclusión

Para mostrar una imagen con JavaScript, use el "createElement ()"Método para crear una etiqueta de imagen. Más específicamente, el método CreateElement () se usa para crear un nodo de elemento. En este artículo, describimos el proceso para mostrar imágenes usando JavaScript.