I have array with multiple images path and i want to print images using loop

Question

I have array with multiple images path and I want to print the images on my HTML page.

    function img() {
    var images = ["1.jpg", "2.jpg", "3.jpg", "4.png"];

    for (var i = 0; i < images.length; i++) {
        document.getElementById("modal-img").innerHTML = images[i].src;
    }
}

img();

Here is my HTML code:

<div id="modal" class="modal">
    <img class="modal-content" id="modal-img">
</div>

Answer 1

Let's try to simplify this problem. What you want to end up with is x amount of img elements with a custom src attached to them. Now, in order to achieve that, you will need to create the elements with js.

Let's start with the basic code to achieve that:

HTML (We don't need the img element anymore as we will create it with JS):

<div id="modal" class="modal">
</div>

JS:

function showImages() {
    const images = ["1.jpg", "2.jpg", "3.jpg", "4.png"];
    const modalElement = document.getElementById('modal');
 
    for (let i = 0; i < images.length; i++) {
        const imageElement = document.createElement('img');
        imageElement.classList.add('modal-content');
        modalElement.appendChild(imageElement);
    }
}
 
showImages();

We will now end up with 4 img elements with the.modal-content class. What we have left to do is to add the src to the element which can be done by simply adding this line to the loop:

imageElement.src = images[i];

Final Code:

HTML:

<div id="modal" class="modal">
</div>

JS:

function showImages() {
    const images = ["1.jpg", "2.jpg", "3.jpg", "4.png"];
    const modalElement = document.getElementById('modal');
 
    for (let i = 0; i < images.length; i++) {
        const imageElement = document.createElement('img');
        imageElement.classList.add('modal-content');
        imageElement.src = images[i];
        modalElement.appendChild(imageElement);
    }
}
 
showImages();

Answer 2

You're setting the innerHTML of the image tag not setting it source. The code below should work.

document.getElementById("modal-img").src = images[i];

Answer 3

There is no sense to insert the an array of paths into one image and using an id attribute for that.

I think you want more image nodes in your DOM and then insert those paths into those images

For instance

JS

const images = ["1.jpg", "2.jpg", "3.jpg", "4.png"];

document.querySelectorAll('.modal-img')
  .forEach((x, i) => {
    x.setAttribute('src', images[i])
  })

Using for loop:

const objArray = document.querySelectorAll('.modal-img')

for (let i = 0; i < objArray.length; i++) {
  objArray[i].setAttribute('src', images[i])
}

HTML

<div id="modal" class="modal">
  <img class=".modal-img">
  <img class=".modal-img">
  <img class=".modal-img">
</div>

Answer 4

If I understood your question correctly. This code will add all photos from array in the DIV with ID "modal". I hope I have been helpful.

HTML:

<div id="modal" class="modal">
</div>

JS: Add the JS code at the bottom of the HTML!

function img() {
    var images = ["1.jpg", "2.jpg", "3.jpg", "4.png"];
    for (var i = 0; i < images.length; i++) {
        document.getElementById("modal").innerHTML += '<img class="modal-content" id="modal-img" src="'+ images[i] +'">';
    }
}
img();