将图像文件上传到 postgres 并在前端显示时出现问题

Question

我真的希望有人可以提供帮助，因为我已经被这个问题困扰了几天，观看了视频等。我有一个简单的html文件，我想在其中显示存储在postgres中的图像（jpg）。问题是，我的图像似乎没有存储，因为当我选择查看所有行时，它们没有显示在 pgadmin4 上。所以这是我的问题：

• 在 pgadmin4 上的 postgtes 的 bytea 专栏中，它显示 [二进制数据] - 这是否意味着我的图像已上传？
• 我的服务器基于node.js构建，运行成功，但在端点/api/images上，json显示foto_id、用户名，但不显示foto_data，这是我的bytea - 为什么？
• 如何在前端显示图像？我使用 html、css 和 javascript 作为前端，并在 Node.js 服务器上运行

我用于显示图像的文件是：

function loadImages() {
  fetch('http://localhost:3000/api/images')
      .then(response => response.json())
      .then(images => {
          const imageContainer = document.getElementById('image_container');
          images.forEach(image => {
              const div = document.createElement('div');
              div.className = 'w3-third';
              div.innerHTML = `
                  <div class="w3-card">
                      <img src="${image.url}" style="width:100%" class="w3-image">
                      <div class="w3-container">
                          <h5 class="h5icon">${image.username}</h5>
                          <img src="../Backend/Bilder/download.png" style="width:24px" class="downloadicon">
                      </div>
                  </div>
              `;
              imageContainer.appendChild(div);
          });
      })
      .catch(error => console.error(error));
}

loadImages();

对应的html是：

 <div>
    <div id="image_container"></div>
  </div>

有人可以帮我吗？作为旁注：显示了用户名 (${image.username})，因此与服务器的连接正在工作。

是的，在 html 中 script.js 已连接。

提前致谢，安德里亚

• 我尝试了不同的 JavaScript 并期望显示图像，但它不起作用。
• 我尝试了表的不同 postgresql 版本以及如何从文件系统插入图像文件，但没有任何进展
• 我观看了一些 YouTube 视频，尝试了他们的推荐，但仍然不起作用

Answer 1

Postgres bytea 列中的[二进制数据]：当你在 pgAdmin4 的 bytea 列中看到[二进制数据]时，它确实表明你的图像已经以二进制数据的形式存储。这就是图像通常存储在数据库中的方式，所以这是一个好兆头。

在 /api/images 端点中看不到 foto_data：foto_data 没有出现在 JSON 响应中可能有多种原因。这可能是 Node.js 服务器如何查询数据库或如何构建 JSON 响应的问题。以下是一些需要考虑的事项：

确保 Node.js 服务器中的 SQL 查询正确获取 foto_data 字段。 检查服务器端代码是否正确地将 foto_data 包含在响应中。 请注意，二进制数据可能无法直接转换为可读的 JSON 格式。在将其发送到客户端之前，您可能需要将其转换为 Base64 等格式。 在前端显示图像：要显示图像，您需要将数据库中的二进制数据 (bytea) 转换为可以以 HTML 呈现的格式。典型的方法是将二进制数据转换为 Base64 字符串。这是一个基本方法：

在您的服务器上，将二进制数据 (bytea) 转换为 Base64。 修改 /api/images 端点以将此 Base64 字符串作为响应的一部分发送。 在前端 JavaScript 中，将 img 标签的 src 属性设置为此 Base64 字符串。格式为：src="data:image/jpeg;base64,YourBase64String"。 为此，您需要对服务器和客户端代码进行一些修改。

服务器端（Node.js）：

您需要从数据库中获取图像数据。 将二进制数据转换为 Base64 字符串。这通常可以直接在 SQL 查询中或通过编程语言完成。 客户端（JavaScript）：

修改您的客户端代码以处理 Base64 字符串。您应该更改 JavaScript 函数中的 src 属性以使用 Base64 数据。 用于获取和显示图像的 JavaScript 代码可能如下所示：

function loadImages() {
  fetch('http://localhost:3000/api/images')
    .then(response => response.json())
    .then(images => {
        const imageContainer = document.getElementById('image_container');
        images.forEach(image => {
            const div = document.createElement('div');
            div.className = 'w3-third';
            const imageBase64 = image.foto_data; // Assuming 'foto_data' contains the Base64 string
            div.innerHTML = `
                <div class="w3-card">
                    <img src="data:image/jpeg;base64,${imageBase64}" style="width:100%" class="w3-image">
                    <div class="w3-container">
                        <h5 class="h5icon">${image.username}</h5>
                        <img src="../Backend/Bilder/download.png" style="width:24px" class="downloadicon">
                    </div>
                </div>
            `;
            imageContainer.appendChild(div);
        });
    })
    .catch(error => console.error(error));
}

loadImages();