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

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

函数img（）{
var images=[“1.jpg”、“2.jpg”、“3.jpg”、“4.png”]；
对于（var i=0；i

以下是我的HTML代码：

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

---

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

---

document.getElementById（“模态img”）.src=images[i]
在一个图像中插入路径数组并使用id属性是没有意义的

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

比如说

JS

使用for循环：

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

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

const objArray=document.queryselectoral（“.modal img”）
for（设i=0；i

HTML

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

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

HTML（我们不再需要img元素，因为我们将使用JS创建它）：



JS:

函数showImages（）{
const images=[“1.jpg”、“2.jpg”、“3.jpg”、“4.png”]；
const modalElement=document.getElementById（'modal'）；
for（设i=0；i

现在，我们将使用.modal内容类结束4个img元素。 我们剩下要做的是将src添加到元素中，只需将这一行添加到循环中即可：

imageElement.src=images[i]；

最终代码：

HTML:

JS:

函数showImages（）{ const images=[“1.jpg”、“2.jpg”、“3.jpg”、“4.png”]； const modalElement=document.getElementById（'modal'）； for（设i=0；i如果我正确理解了你的问题。此代码将添加ID为“modal”的DIV中数组中的所有照片。我希望我能帮上忙

HTML:

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

函数img（）{
var images=[“1.jpg”、“2.jpg”、“3.jpg”、“4.png”]；
对于（var i=0；i

使用打印机打印图像或仅在屏幕上显示图像是什么意思？我认为您也缺少基本路径我只想以简单的方式在浏览器中显示尝试使用react

document.querySelectorAll（'.modal img'）.forEach（（x，I）=>x.src==images[I]）

我也这样做了，但它没有在我的浏览器中显示任何图像，也没有在console.function img（）中显示任何错误。{var images=[“1.jpg”、“2.jpg”、“3.jpg”、“4.png”]；for（var I=0；I路径到图像/${images[i]}；我必须使用for loop而不是foreach loop我必须使用for loopUpdated@waqasumer图像在我的根文件夹中

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

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

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