從靜態文件夾獲取圖像文件並將其顯示在客戶端應用程序中

Question

我將圖像存儲在我的Express服務器應用程序中的靜態文件夾中。 到目前為止，這按預期工作。 與此相關的代碼如下

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請求。 從此線程基本上使用.sendFile ，但是由於找不到404，因此無法正常工作。 還有其他問題嗎？

無論如何，我想問題是如何以一種可以在客戶端應用程序上顯示它們的格式獲取文件？

這是我的客戶代碼的樣子：

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);

---

順便說一句，如果由於某種原因（例如發送自定義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);
  });