將圖像數組從JS文件傳遞到EJS

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

您一直用圖像覆蓋相同的圖像標簽，直到位於陣列的末尾。

您可以做的是克隆圖像標簽，然后將其作為子元素添加到“ flick” 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);
      }

這將生成最上面的圖像的副本，並將其附加到flick div 。 如果您需要刪除原始的img標簽，可以執行：

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

在for循環之后。

在此處查看有效的小提琴： https ： //jsfiddle.net/0Lsh2y1j/2/