我有多个图像路径的数组，我想使用循环打印图像

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