JavaScript Array de Imágenes

En programación web, a menudo necesitamos mostrar múltiples imágenes en una página. En lugar de agregar cada imagen individualmente, podemos usar un array de JavaScript para almacenar nuestras imágenes y mostrarlas dinámicamente en la página.

Creando el Array

Podemos crear un array de imágenes de varias maneras en JavaScript, ya sea declarándolo directamente en nuestro código o asignándolo a una variable:

// Declarando un array de imágenes
var images = ['/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg'];

// Asignando un array de imágenes a una variable
var images = [];
images[0] = '/path/to/image1.jpg';
images[1] = '/path/to/image2.jpg';
images[2] = '/path/to/image3.jpg';

Mostrando las Imágenes

Una vez que tenemos nuestro array de imágenes, podemos mostrarlas en la página web usando JavaScript. Usando un loop for y la propiedad src de una etiqueta img, podemos crear y agregar dinámicamente las imágenes a la página:

// Accediendo a un elemento HTML mediante su ID
var gallery = document.getElementById('gallery');

// Creando un loop for para recorrer el array de imágenes
for (var i = 0; i < images.length; i++) {
  // Creando una nueva etiqueta img
  var img = document.createElement('img');
  // Agregando la ruta de la imagen al atributo src
  img.src = images[i];
  // Agregando la imagen a la galería
  gallery.appendChild(img);
}

Conclusiones

Usando un array de JavaScript para almacenar nuestras imágenes, podemos mostrarlas dinámicamente en la página web. Además, podemos manipular fácilmente el array para agregar o eliminar imágenes. Espero que este tutorial te haya resultado útil!