React：顯示轉換為 base64 的圖像

Question

我很難顯示由我的 Node/Express 服務器發送到我的 React 應用程序的圖像。 我嘗試仔細閱讀其他 SO 問題中的解決方案，但我無法讓它發揮作用。 這是我的步驟

1. 我的 Node/Express 服務器發送圖像

router.get('/:file_id', (req, res) => {
   //... Query file information //
   const filePath = `${config.FILE_STORAGE}/${doc._id}`;
   res.sendFile(filePath);
});

2. 我的圖片發送正確

3. 我用 React 解碼了它

axiosInstance.get(`/files/${document.file}`)
    .then((response) => {
      const image_base64 = Buffer.from(response.data).toString('base64');
      setThumbnail(image_base64);
})

4. 並將其插入到img標簽中

<img src={`data:image/jpg;base64,${thumbnail}`}

但圖像不顯示。 我做了一些額外的驗證：

• 我在<img>手動插入了一張我使用在線轉換器進行 base64 編碼的圖像，並顯示出來。
• 我將步驟（3）中編碼的base64圖像復制到在線解碼器中，但無法解碼。 因此，問題顯然在於讀取響應數據或在 base64 中對其進行編碼。 你能幫我嗎？ 謝謝！

Answer 1

您可以使用此函數生成base64字符串。 這對我來說可以。 函數如下：

function base64ArrayBuffer(byteArray) {
  var base64 = "";
  var encodings =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

  var bytes = byteArray;
  var byteLength = bytes.byteLength;
  var byteRemainder = byteLength % 3;
  var mainLength = byteLength - byteRemainder;

  var a, b, c, d;
  var chunk;

  // Main loop deals with bytes in chunks of 3
  for (var i = 0; i < mainLength; i = i + 3) {
    // Combine the three bytes into a single integer
    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];

    // Use bitmasks to extract 6-bit segments from the triplet
    a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
    b = (chunk & 258048) >> 12; // 258048   = (2^6 - 1) << 12
    c = (chunk & 4032) >> 6; // 4032     = (2^6 - 1) << 6
    d = chunk & 63; // 63       = 2^6 - 1

    // Convert the raw binary segments to the appropriate ASCII encoding
    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
  }

  // Deal with the remaining bytes and padding
  if (byteRemainder == 1) {
    chunk = bytes[mainLength];

    a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2

    // Set the 4 least significant bits to zero
    b = (chunk & 3) << 4; // 3   = 2^2 - 1

    base64 += encodings[a] + encodings[b] + "==";
  } else if (byteRemainder == 2) {
    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];

    a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
    b = (chunk & 1008) >> 4; // 1008  = (2^6 - 1) << 4

    // Set the 2 least significant bits to zero
    c = (chunk & 15) << 2; // 15    = 2^4 - 1

    base64 += encodings[a] + encodings[b] + encodings[c] + "=";
  }

  return base64;
}

所以，在你的情況下，代碼應該是：

axiosInstance.get(`/files/${document.file}`)
    .then((response) => {
      const image_base64 = base64ArrayBuffer(Buffer.from(response.data));
      setThumbnail(image_base64);
})