Q:

$�a �$I��"I�$�... for PNG image - Vue/Node/Express | How do I display an image that I sent from a Node.js server to a client Vue app?

Using Node/Express, I have the following route:

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

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

In my client Vue app, I am trying to display the image that I am receiving from the server.. Currently I am sending the file to the console and I get these weird characters:
04f\u0001���@7�\u000f�T�n���_�\u0004\f\u0002# .... and so on ... a very long string
The header says that it is type "content-type
:
"image/png" " which is great because I am trying to display an image.
What do I need to do to transform this string into a viewable image? Something that I can pass to my Vue component in the form of an  HTML tag.
Any tips/advice in the right direction would be incredibly helpful!
04f\u0001���@7�\u000f�T�n���_�\u0004\f\u0002#

A:

One approach would be to send the image data as a base64 endcoded string using btoa, the set the image's src attribute using the encoded string from the response:
<img src=`data:image/png;base64,${data}`/>

Otherwise, you can also return the response image from Express like:
let image = new Buffer(imageData, 'base64');

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

