PNG圖像的$áa$ I $ I $$…-Vue / Node / Express |如何顯示從Node.js服務器發送到客戶端Vue應用程序的圖像？

Question

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

 app.get('/get-image', function(req, res) { ... res.sendFile(path.join(__dirname, '..', account.profileImg)); }) 

在我的客戶端Vue應用程序中，我試圖顯示從服務器接收到的圖像。當前，我正在將文件發送到控制台，並且得到了這些奇怪的字符：

04f \
@7 \ T n __ \\ u0004 \\ f \\ u0002＃....以此類推...很長的字符串

標頭說它是類型“ content-type：“ image / png”“，這很好，因為我試圖顯示圖像。

我需要怎么做才能將此字符串轉換為可見圖像？ 我可以以HTML標簽的形式傳遞給Vue組件的東西。

正確方向的任何提示/建議都將非常有用！

04f \
@7 \ 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);