Question

嗨，我正尝试将图像src的数组从我的javascript文件传递到下面的ejs文件。

 <div id = "flick">

<img src="nothing.jpg" id="image" name="image"/>

 <% var imgArray = imgLinks %>  //Grab the array of img src's
            <script>
              var passArray = [];
              passArray = <%= imgArray  %>; // Pass to a local array 
              for (i = 0; i < passArray.length; i++){

                document.getElementById('image').src = passArray[i];
              }
              </script>

 </div>

我已经测试过，发现我正确地接收了'imgLinks'数组，但是我想知道我如何通过并显示所有图像数组。我是Java语言的新手，很抱歉，这很愚蠢。

Answer 1

您一直用图像覆盖相同的图像标签，直到您位于数组的末尾为止。

您可以做的是克隆图像标签，然后将其作为子元素添加到“轻拂” div

      var passArray = [];
      passArray = <%= imgArray  %>; // Pass to a local array 
      for (i = 0; i < passArray.length; i++){
        var itm = document.getElementById('image');
        var cpy = itm.cloneNode(true);
        cpy.id = "image" + i;
        cpy.src = passArray[i];
        document.getElementById("flick").appendChild(cpy);
      }

这将生成最上面的图像的副本，并将其附加到轻拂div上。如果您需要删除原始的img标签，可以执行：

document.getElementById("image").remove()

for循环之后。

在这里查看有效的小提琴：https://jsfiddle.net/0Lsh2y1j/2/

将图像数组从JS文件传递到EJS

1 个答案: