Question

这是来自服务器的代码：

router.get('/vacation/pic', function(req, res, next) { 
 fs.readFile('./public/picters/avatar-1566053205516', function (err, data) {
  if (err) throw err;
  res.write(data);
  console.log(data);
  res.end();
});
});

这是从前端获取图像的地方：

onGetpics: () =>{ axios.get('http://localhost:3000/vacation/pic', {
    })
    .then(res => {
     dispatch({ type: "GET_PICS",value:res.data})
    })  
    }
  };

this is how i get it

and this is how it sent

Answer 1

您需要做的是从图像数据中构建一个数据URL，如下所示：

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV...">

对于您发布的数据的准确度，我仍然不确定（例如，您看到一个名为pics的变量，这使我感到困惑的是，单个图像或多个图像都融合在一起），但是看起来二进制图像数据是以字符串形式传递的，因此功能btoa()可以将二进制数据转换为base64格式。

基本逻辑看起来像这样：

const imageElem = document.getElementById('image-id'); // Could be a querySelector as well

// Assuming PNG image
imageElem.src = 'data:image/png;base64,' + btoa(theImageDataAsString);

如何读取我从服务器获取的图像作为缓冲区？

1 个答案: