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