Javascript 从数据库获取分割图像路径并附加到src

我有多个图像路径保存在同一列中的数据库中。图像保存在此示例中的数据库中：

并非每次上载两个图像时，都会突出显示多个图像上载示例，并用逗号分隔。我正在使用Nodejs，并在ejs端使用foreach获取图像数据。数据是index.ejs端select语句的输出

index.js

我正在本地主机服务器上保存映像。我正在进行拆分，并希望在脚本标记中附加src，代码如下：

<script>
  var desc = $('#desc').val();
  var temp = new Array();
  temp = desc.split(",");
  var container = document.getElementById("container");
  temp.forEach(function (imagepath) {
   var img = document.createElement("img");
   img.className = "class";
    img.src = imagepath;   
   // div.innerText = text;
    img.classList.add("li-added");
    container.append(img);
});

document.getElementById("pic1").src= "/" + text;

</script>

---

我对分割文本使用了相同的格式，它也可以工作，但不确定图像部分出了什么问题。我将感谢任何帮助或任何其他方式来实现这一点。谢谢

我还是不知道你到底打算做什么。然而，我试图整理你的代码。在HTML中，我通过用类属性替换非唯一ID来消除它们

在JavaScript代码中，我用合适的jquery表达式替换了冗长的普通JavaScript表达式，并完全避免了一些临时变量。以下是有效的HTML和工作JavaScript，但可能不是您想要的：

//var desc=$'desc'.val； var data=[{image:MyImage-1591506118979.png}， {image:MyImage-1591507932201.jpg}， {图片：photos-1591548210637.jpg，photos-1591548210640.png}， {image:MyImage-159149488039.png}， {image:MyImage-1591505437596.jpg}， {image:MyImage-1591084895899.jpg}， {image:MyImage-1591085173153.jpg}， {image:MyImage-1590905192772.JPG}]； $container.htmldata.mapitem=> `` +item.image.split'，'.mappth=>`.join；

---

能否提供从$'desc'.val获得的输入字符串？这将有助于确定问题。另一点：顶部的模板将创建具有相同id的多个元素，这是无效的html。谢谢。我编辑并将输入字符串添加到问题中。您是否建议元素应该在循环之外？

<% data.forEach(function(item) { %>
    <input type="hidden" id="desc" value="<%= item.image %>" />
    <img id="pic1" class="pic-1" src = "" alt="image"  >
<% }); %> 

MyImage-1591506118979.png
MyImage-1591507932201.jpg
photos-1591548210637.jpg,photos-1591548210640.png
MyImage-1591494888039.png
MyImage-1591505437596.jpg
MyImage-1591084895899.jpg
MyImage-1591085173153.jpg
MyImage-1590905192772.JPG

<script>
  var desc = $('#desc').val();
  var temp = new Array();
  temp = desc.split(",");
  var container = document.getElementById("container");
  temp.forEach(function (imagepath) {
   var img = document.createElement("img");
   img.className = "class";
    img.src = imagepath;   
   // div.innerText = text;
    img.classList.add("li-added");
    container.append(img);
});

document.getElementById("pic1").src= "/" + text;

</script>