我有多個圖像路徑的數組，我想使用循環打印圖像

Question

我有多個圖像路徑的數組，我想在我的 HTML 頁面上打印圖像。

    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();

這是我的 HTML 代碼：

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

Answer 1

讓我們嘗試簡化這個問題。 您最終想要的是 x 數量的 img 元素，並附加了自定義 src。 現在，為了實現這一點，您需要使用 js 創建元素。

讓我們從實現這一目標的基本代碼開始：

HTML（我們不再需要 img 元素，因為我們將使用 JS 創建它）：

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

記者：

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();

我們現在將得到 4 個 img 元素，它們的 .modal-content 為 class。我們剩下要做的是將 src 添加到元素中，這可以通過簡單地將此行添加到循環中來完成：

imageElement.src = images[i];

最終代碼：

HTML：

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

記者：

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

您正在設置圖像標記的 innerHTML 而不是設置它的來源。 下面的代碼應該可以工作。

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

Answer 3

將一組路徑插入到一個圖像中並為此使用 id 屬性是沒有意義的。

我認為您需要在 DOM 中添加更多圖像節點，然后將這些路徑插入到這些圖像中

例如

JS

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

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

使用 for 循環：

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

如果我正確理解你的問題。 此代碼將添加 ID 為“modal”的 DIV 中數組中的所有照片。 我希望我有所幫助。

HTML：

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

JS：在HTML底部添加JS代碼！

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();