1

I'm trying to implement NgOptimizedImage in my angular app.

<img [ngSrc]="imageUrl" width="196" height="196">

imageUrl is url to my server. The response is buffer. I used to convert the buffer to string in component.ts file and then using [src]="convertedBuffer" show the image. But NgOptimizedImage requires src, so it loads from the server when the image can be seen.

Do I have to convert the buffer to string on server, or is there a way to convert it to string on client side?

1baz
  • 148
  • 1
  • 9

2 Answers2

1

There is no way to do that. HTTP doesn't have native support for sending base64-encoded data, so the browser won't be able to decipher your image once it is requested.

Base64 is only supported in data URIs. It seems that you have to convert your server to send non-base64-encoded images or go back to your old way of displaying images.

Antoni Kiszka
  • 36
  • 3
0

The problem is on server side. You have to send buffer and set "Content-Type": "image/TYPE" header. If you're using express and nodejs here's how you can do it:

res.contentType('image/jpeg'); // set Content-Type header
res.send(buffer); // send buffer. make sure it is buffer (buffer instanceof Buffer)
1baz
  • 148
  • 1
  • 9