$�a�$I��＆＃34;I�$�...用于PNG图像 - Vue / Node / Express |如何显示从Node.js服务器发送到客户端Vue应用程序的图像？

Question

使用Node / Express，我有以下路线：

＆＃13;

＆＃13;

app.get('/get-image', function(req, res) {

  ...
  
  
  res.sendFile(path.join(__dirname, '..', account.profileImg));
})

＆＃13;

＆＃13;

＆＃13;

在我的客户端Vue应用程序中，我正在尝试显示我从服务器收到的图像。目前我正在将文件发送到控制台，我得到这些奇怪的字符：

04f \u0001���@7�\u000f�T�n���_�\ u0004 \ f \ u0002＃....等等...非常长的字符串

标题表示它是＆＃34;内容类型 ： ＆＃34;图像/ PNG＆＃34; ＆＃34;这很棒，因为我试图显示图像。

将此字符串转换为可视图像需要做什么？我可以用HTML标签的形式传递给我的Vue组件。

任何正确方向的提示/建议都会非常有用！

04f\u0001���@7�\u000f�T�n���_�\u0004\f\u0002#

Answer 1

一种方法是使用btoa将图像数据作为base64结束的字符串发送，使用响应中的编码字符串设置图像的src属性：

<img src=`data:image/png;base64,${data}`/>

否则，您也可以从Express返回响应图像：

let image = new Buffer(imageData, 'base64');

res.writeHead(200, {
  'Content-Type': 'image/png',
  'Content-Length': image.length
});
res.end(image);