javascript - 尝试使用javascript显示数组中的图像

Question

我正在尝试在表格单元格中显示我在图像数组中的图像。我已经尝试过使用 for 循环和 foreach 循环。显示图像，但要么在每个单元格中显示所有图像，要么在每个单元格中仅显示最后一个图像。

这是我尝试的第一个循环：

此代码使所有图像显示在一个单元格中

此代码导致数组中的最后一张图片显示在每个单元格中

这是我的整个循环：

map.forEach((values, keys) =>{
                      var table = 
                      document.getElementById('table');
                      var row = table.insertRow();
                      var cellImage = row.insertCell(0);
                      var cellArtist = row.insertCell(1);
                      var cellTitle = row.insertCell(2);
                      cellArtist.innerHTML = keys;
                      cellTitle.innerHTML = values;

                      var image = 
                      document.createElement("img");
                      for(let i = 0; i < mapImg.length; i++){     
                                            
                          image.src = mapImg[i];

                          cellImage.appendChild(image);
                      }
})

map包含此数据

我正在尝试使用我的数组中的键和值填充单元格map。图像存储在数组中mapImg。

var map = new Map();
var mapImg = [];

如果有人有想法，我会非常感激。

更新： 我不得不改变循环的位置，我不得不把outerHTML附加的图像。现在显示图像的代码如下所示

var image = document.createElement("img");
image.src = mapImg[i];              
cellImage.appendChild(image).outerHTML;

标签： javascriptloops