从数据库获取的拆分图像路径并附加到 src答案

【问题标题】：Split image path gotten from database and append to src从数据库获取的拆分图像路径并附加到 src
【发布时间】：2020-09-28 05:05:45
【问题描述】：

我在同一列中将多个图像路径保存到数据库中。该样本中的图片保存在数据库中：

不是每次都上传两张图片（突出显示的是用逗号分隔的多张图片上传示例）。我正在使用 Nodejs，并在ejs 端获取带有foreach 的图像数据（数据是index.ejs 端的select 语句的输出

index.js

router.get('/homes', function (req, res, next) {
  db.query("SELECT * FROM stocks", function (err, rs) {
    if (err) {
      console.log(err);
    }
    else {
      res.render('homes', {data:rs})
    }
  });
});

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

item.image 值（您从$('#desc').val() 获得的输入字符串）。它只是循环发生时图像路径的字符串格式。

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

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

<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>

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

【问题讨论】：

你能提供你从$('#desc').val()得到的输入字符串吗？这将有助于识别问题。还有一点：你的模板在顶部会创建多个<img>elements，id相同，是无效的html。
谢谢。我编辑了输入字符串并将其添加到问题中。您是否建议 <img> 元素应该在循环之外？

标签： javascript node.js ejs

【解决方案1】：

我仍然不知道你打算做什么。但是，我试图整理您的代码。在 HTML 中，我通过将非唯一 ID 替换为类属性来摆脱它们。

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

// var desc = $('#desc').val();
var data=[{image:"MyImage-1591506118979.png"},
{image:"MyImage-1591507932201.jpg"},
{image:"photos-1591548210637.jpg,photos-1591548210640.png"},
{image:"MyImage-1591494888039.png"},
{image:"MyImage-1591505437596.jpg"},
{image:"MyImage-1591084895899.jpg"},
{image:"MyImage-1591085173153.jpg"},
{image:"MyImage-1590905192772.JPG"}];

$("#container").html(data.map(item=>
    `<input type="text" class="desc" value="${item.image}" /><br>`
    + item.image.split(',').map(pth=>`<img class="pic1" src ="${pth}" alt="${pth}"><br>`)).join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>

【讨论】：