$�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?

Question

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\
@7 \ T n _ \\\f\# .... 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\
@7 \ T n _ \\\f\#

Answer 1

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