时间戳

首页 > 解决方案 > 从数据库获取的拆分图像路径并附加到 src

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

问题描述

我在同一列中将多个图像路径保存到数据库中。图像保存在数据库中的此示例中：在此处输入图像描述

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

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

我将图像保存在我的本地主机服务器上。我正在进行拆分，并希望script使用以下代码在标签中附加 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>

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

标签： javascriptnode.jsejs

解决方案

我仍然不知道你打算做什么。但是，我试图整理您的代码。在 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>

推荐阅读