如何显示来自 Node Js 服务器的图像

Posted 2023-02-16

【中文标题】如何显示来自 Node Js 服务器的图像

【英文标题】：How to display image from the Nodejs sever

【发布时间】：2022-01-19 20:42:20

【问题描述】：

我在服务器上存储了图像，这些图像通过数据库中的路径存储，我必须显示这些图像我该怎么做

"_id": "61bb82935739a52a55316dc3",
"name": "Egg",
"type": "protein",
"image": "fooduploads\\Egg.png",
"__v": 0

这就是图像在数据库中的存储方式，但是当我必须在前端使用这些图像时如何显示它们。我是必须要开辟新路线还是必须做其他事情

【问题讨论】：

您应该使用server-static 模块提供您的图像。还将您的图片名称添加到您的公共 URL 的末尾。

这能回答你的问题吗？ How to serve static profile images in node

您必须为您的图片声明一个静态路径，并且最好将文件的 url 存储在您的数据库中。

【参考方案1】：

你也可以做一个路由，接受 img id，在数据库中查找信息，从文件系统中读取文件并返回图像。

这里有一些 suedo 代码来解释

app.get('/img/:id', (req, res, next) => 
  // Code to talk to the database and get the json
  // getImageInfoFromDatabase(req.params.id)

  const dbResponse = 
    "_id": "61bb82935739a52a55316dc3",
    "name": "Egg",
    "type": "protein",
    "image": "fooduploads\\Egg.png",
     "__v": 0
  
  
  const file = fs.readFileSync(path.join(__dirname, dbResponse.image)

  res.sendFile(file)
)

然后您可以在前端执行：<img src='/img/61bb82935739a52a55316dc3 />

【讨论】：

我已经制定了路线，但出现了问题，因为图像路径中的双反斜杠此字段未在前端打开图像

在服务器上去路由时，看到图片了吗？