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

Question

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

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基本上使用 express'.sendFile，但这不起作用，因为我收到 404 not found。还有什么问题吗？

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

这是我的客户端代码:

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

Answer 1

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

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

---

BTW 如果出于某种原因，例如发送自定义 HTTP header ，您想使用 fetch() :

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