Rendering images from an array 📸

How I recently added images onto a page using JavaScript

Step 1:

Within the index.html file, I created an empty div with an id of “container”. This is where I will later render the images through the DOM.

Step 2:

I then created an array of image src’s (as strings), within the index.js file. The array was called teamMembers.

Step 3:

I grabbed the “container” element from the html file using document.getElementById.

Step 4:

I then created a function, where I set up a for loop which took in the array length, for (let i = 0; i < teamMembers.length; i++) and proceeded to render out: container.innerHTML += `<img class=”person-img” src=”${teamMembers[i]}”> ` within the function body.

Step 5:

The img class “person-img” was not overly styled in the css file, as I wanted the images to display in block anyway.

That’s all!

Leave a comment

Your email address will not be published.