从静态文件夹获取图像文件并在客户端应用程序中显示它们

Posted 2023-03-14

【中文标题】从静态文件夹获取图像文件并在客户端应用程序中显示它们

【英文标题】：GET image files from static folder and display them in client app

【发布时间】：2019-07-09 22:35:24

【问题描述】：

我将图像存储在我的快速服务器应用程序的静态文件夹中。到目前为止，这按预期工作。重要的代码如下

app.use('/uploads', express.static(Path.join(__dirname, `/../uploads`)))

现在从客户端应用程序中，我需要对这些图像执行 GET 请求并显示它们，就目前而言，仅对我的图像执行请求就会给我不知道如何处理的不可用数据。以下是我所说的示例：

IHDRXZ��9�|iCCPICC Profile(�c``*I,(�aa``��+)
rwR���R`������ �`� ��\\��À|����/���J��yӦ�|�6��rV%:���wJjq2#���R��d

有没有办法获取这些数据并将其用作图像？

我还阅读了通过客户端和服务器之间的线路发送图像的另一种方法，即设置我的 GET 请求。来自this thread 基本上使用快递'.sendFile，但这不起作用，因为我找不到 404。还有什么问题吗？

无论如何，我想问题是如何以可以在客户端应用程序上显示的格式获取文件？

这是我的客户端代码的样子：

return isomorphicFetch(`$MY_URL/$imageId`, 
    headers: 
      Accept: 'application/json'
    
    method: 'GET'
  )
.then(res => 
    console.log('My fetched image', res)
    return res
 )

【问题讨论】：

数据不是“垃圾”。

这可能是措辞不当，我的意思是对于我正在尝试做的事情来说，这是不可用的数据，除非当然有使用它的方法。

能否在问题中包含客户端代码？

是的。刚刚用客户端代码更新了 OP

见Displaying pdf from arraybuffer。 console.log(typeof data) 打印什么？ isomorphicFetch 是否提供将响应类型设置为ArrayBuffer 或Blob 的选项？

【参考方案1】：

为什么不直接使用<img> 元素？

const img = document.createElement('img');
img.src = `$MY_URL/$imageId`;
someplace.appendChild(img);

---

顺便说一句，如果出于某种原因，例如发送自定义 HTTP 标头，您想使用fetch()：

fetch(`$MY_URL/$imageId` /*...*/)
  .then(res => res.blob())
  .then(blob => 
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    somewhere.appendChild(img);
  );

【讨论】：

因为我很笨，没想到这样做。这完美！谢谢！