Tengo una serie de imágenes y me gustaría mostrarlas en una etiqueta div usando un bucle, pero no se muestra ninguna de las imágenes.
const images = ["images/image1", "images/image2", "images/image3"]; for (let x = 0; x < images.length; x++) { const element = '<img src="' + images[0] + '">' let pic = document.querySelector('.images').innerHTML += element; pic; }Solo hace referencia al primer índice de la matriz desde que usó images[0] . Deberías estar usando el index.
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"]; for (let x = 0; x < images.length; x++) { const element = '<img src="' + images[x] + '">' document.querySelector('.images').innerHTML += element; } <div class="images"></div> Si desea usar innerHTML para agregar las imágenes, usar map() y join() sería una mejor solución, ya que solo actualizará el DOM una vez.
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"]; const myHtml = images.map(function(path) { return '<img src="' + path + '">'; }).join(''); document.querySelector('.images').innerHTML = myHtml; <div class="images"></div>Otra opción es crear los elementos y agregarlos.
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"]; const outElem = document.querySelector('.images'); images.forEach(function (path) { const img = document.createElement("img"); img.src = path; outElem.appendChild(img); }); <div class="images"></div>Prueba appendChild :
const images = ["images/image1", "images/image2", "images/image3"]; const container = document.querySelector('#images'); for (let image of images) { const htmlImage = document.createElement("img"); htmlImage.src = image; container.appendChild(htmlImage); }prueba esto:
const images = ["images/image1", "images/image2", "images/image3"]; for (let x = 0; x < images.length; x++) { const element = '<img src="' + images[x] + '">' document.querySelector('.images').innerHTML += element; }