Can't Render a Binary Image File

🙋 Help
1

This isn’t a Postman issue, but one I am hoping someone here might be able to help.

I am calling a REST endpoint, which returns a binary representation of an image. Here is a code snippet from the REST endpoint…

final StreamingOutput fileStream = output -> {
     output.write(photo.getData());
     output.flush();
};

I am using Angular 10 on the client-side talking to a Node layer I created. The Node layer sends a GET request to the REST endpoint and receives the binary representation of the image. However, I cannot for the life of me get that image to display on the Browser. I have tried everything of which I can think but have not had success.

When I use Postman to call the REST endpoint, the image renders in Postman just fine.

I have tried:

  • sending the binary stream directly to the Browser,
  • prepending the “data:image/jpeg;Base64,” to the binary stream,
  • prepending the “data:image/jpeg,” to the binary stream,
  • converting the binary stream to base64 using atob(),
  • and many, many other approaches

Yet, I am unable to perform something that should be very straightforward and something Postman is easily doing.

In my HTML, the tag is coded as such…

<div>
    <p>Here is the user image</p>
    <img [src]="imageName">
</div>

I cannot express how much I would appreciate any assistance in to solving this very odd dilemma. What questions can I answer.

Thanks!

Post Note
Really what this boils down to is - how to convert an image file (jpeg or png) coded as a byte array into something that can be displayed on a browser as an image. I assume this must be a conversion to Base64.