Feathers.js - Content Type - GET

Question

Im trying to get a picture from my feathers server over the GET method. Trying to call the server over

http://localhost:3030/uploads/945fdcbc5ef41f8d301c14d8cfb3c4ae536f4bffc0338091043ec5cf27b9bcff.png

should return an image. Instead i get a response like:

{"id":"945fdcbc5ef41f8d301c14d8cfb3c4ae536f4bffc0338091043ec5cf27b9bcff.png","uri":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAABqlBMVEV/f38AAAD///....... " }

My question is: Is it right that i get a Json response and have to change the "responded" content-type to data:image/png to see the picture directly in the Browser?

Answer 1

You can show this image directly on a website by using <img src="${data.uri}">.

It is also possible to change the content type and response in a custom service middleware converting the data URI to a buffer:

app.use('/uploads', uploadService, (req, res) => {
  // res.data is the response. We need only the base64 payload without the prefix
  const base64Data = res.data.uri.replace('data:image/png;base64,', '');
  const buffer = Buffer.from(base64Data, 'base64');

  res.set('Content-Type', 'image/png');
  res.send(buffer);
});

This should now show an image when visiting the URL.