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

【问题标题】：I have array with multiple images path and i want to print images using loop我有多个图像路径的数组，我想使用循环打印图像
【发布时间】：2020-11-07 02:56:53
【问题描述】：

我有多个图像路径的数组，我想在我的 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>

【问题讨论】：

你想打印图像，使用打印机还是只显示在屏幕上是什么意思？
我认为您也缺少基本路径
我只想简单的在浏览器中显示
尝试使用 react
document.querySelectorAll('.modal-img').forEach((x,i)=> x.src===images[i])

标签： javascript html arrays loops

【解决方案1】：

让我们试着简化这个问题。您最终想要的是 x 数量的 img 元素，并附有自定义 src。现在，为了实现这一点，您需要使用 js 创建元素。

让我们从实现这一目标的基本代码开始：

HTML（我们不再需要 img 元素，因为我们将使用 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();

我们现在将得到 4 个带有 .modal-content 类的 img 元素。我们剩下要做的就是将 src 添加到元素中，只需将此行添加到循环中即可：

imageElement.src = images[i];

最终代码：

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

【讨论】：

我必须使用 for 循环

【解决方案2】：

您正在设置图像标签的innerHTML，而不是设置它的来源。下面的代码应该可以工作。

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

【讨论】：

我做了同样的事情，但它没有在我的浏览器中显示任何图像，也没有在控制台中显示任何错误。
函数 img() { var images = ["1.jpg", "2.jpg", "3.jpg", "4.png"]; for (var i = 0; i
基本路径...PATH_TO_IMAGE/${images[i]};

【解决方案3】：

如果我正确理解了您的问题。此代码将添加 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();

【讨论】：

图片在我的根文件夹中

【解决方案4】：

将一组路径插入到一个图像中并为此使用 id 属性是没有意义的。

我认为您希望 DOM 中有更多图像节点，然后将这些路径插入这些图像中

例如

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>

【讨论】：

我必须使用 for 循环而不是 foreach 循环