Cómo mostrar imágenes con JavaScript
JavaScript es un lenguaje de secuencias de comandos dinámico utilizado para efectos dinámicos en sitios web. Además, las páginas web contienen imágenes que utilizan la etiqueta HTML. A veces, la página tarda mucho en cargarse, por lo que los desarrolladores prefieren agregar imágenes mediante etiquetas de imagen de JavaScript, que se cargan dinámicamente y tardan menos en cargarse o mostrarse con cada clic. Este artículo describe el proceso de visualización de imágenes usando JavaScript.
¿Cómo mostrar una imagen con JavaScript?
Para ver imágenes con JavaScript, use el «crearElemento()” método para crear un nodo de elemento HTML. Para lograr esto, se necesitaimagen‘ como parámetro.
sintaxisPara crear un nodo de elemento, use la sintaxis dada: document.createElement(type)
Ejemplo 1: Mostrar imagen con JavaScriptEn este ejemplo, no es necesario agregar código HTML ya que estamos agregando una imagen usando JavaScript. Para hacer esto, escriba el siguiente código en el archivo JavaScript: function displayImage(src, width, height) { var img = document.createElement(«img»); img.src = fuente; img.ancho = ancho; img.altura = altura; document.body.appendChild(img);} En el fragmento de código anterior:
- Definir una función”Mostrar imagen()«con fuente de imagen»fuente«, «Amplio«, y «Altura‘ como parámetro.
- Agregue una etiqueta de imagen o elemento en JavaScript usando el «crearElemento()» método.
- Establezca las propiedades de la imagen, como la fuente, el ancho y la altura de una imagen.
- Luego pegue la imagen con el «documento.cuerpo.appendChild()» método.
Ahora llama 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, vea cómo mostrar una imagen cuando se hace clic en un botón.
Ejemplo 2: mostrar la imagen al hacer clic en el botón con la clase CSSEste ejemplo trata sobre cómo se puede usar una clase CSS para mostrar una imagen en JavaScript y cómo se muestra la imagen cuando se hace clic en el botón. Primero, creemos un botón en un archivo HTML que tendrá el «Mostrar imagen()” función cuando se hace clic en el botón: Vamos a crear una clase CSS”imagenCaracterísticas‘ para cambiar los atributos de la imagen como ‘longitud«, y «Amplio” de una imagen: .imageFeatures{ ancho: 320; altura: 250;} define la función «Mostrar imagen()‘ con un único parámetro src. Luego agregue un elemento de imagen usando el método createElement() y configure la fuente de una imagen. Ahora agrega la clase «imagenCaracterísticas‘ para establecer los atributos de la imagen con el ‘classList.add()» método. Finalmente, agregue la etiqueta de imagen en un documento con el «documento.cuerpo.appendChild()” Método: function displayImage(src) { var img = document.createElement(«img»); img.src = fuente; img.classList.add(«ImageFeatures»); document.body.appendChild(img);} Como puede ver, cuando hace clic en el botón, la imagen se muestra sin demora:
Mostramos la imagen usando JavaScript.
Conclusión
Para mostrar una imagen con JavaScript, use el «crearElemento()” 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, hemos descrito el proceso de visualización de imágenes usando JavaScript.
