How to display images from a loop JavaScript

Question

I have an array of images and would like to display them in a div tag using a loop, but none of the images are showing.

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;
}

images[0] every time you read the first image. You should be using x which is the index of the array. images[x] Now if the images do not show up, then you have an issue with the path to the image. — epascarello
– epascarello, Commented Feb 14, 2022 at 23:27
You should move away from string creation / manipulation and instead create actual elements and append them. It is true that the document initially exists as HTML text, but the browser parses it into the DOM, and inserting elements into the DOM is much more convenient (and more performant) than adding together a bunch of strings with various quotes all over the place. — user5734311
– user5734311, Commented Feb 14, 2022 at 23:51

epascarello · Accepted Answer · 2022-02-14 23:43:12Z

1

You are only ever referencing the first index of the array since you used images[0]. You should be using the 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>

You you want to use innerHTML to add the images, using map() and join() would be a better solution since you only will update the DOM once.

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>

Other option is creating the elements and appending them.

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>

answered Feb 14, 2022 at 23:43

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doug22 Over a year ago

when I try this, I get an error: Uncaught TypeError: document.querySelector(...) is null

epascarello Over a year ago

So that means it did not find your element....

hous · Accepted Answer · 2022-02-14 23:37:42Z

0

try this:

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;
   
}

edited Feb 14, 2022 at 23:37

answered Feb 14, 2022 at 23:30

hous

1141 silver badge13 bronze badges

3 Comments

epascarello Over a year ago

let element should be const

hous Over a year ago

@epascarello element willl be reassigned that's why I used let

epascarello Over a year ago

It is defined in a block and value is not set again, it should be const

QuinnF · Accepted Answer · 2022-04-09 19:59:00Z

0

Try 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);
}

edited Apr 9, 2022 at 19:59

answered Feb 14, 2022 at 23:34

QuinnF

2,2294 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to display images from a loop JavaScript

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related