Image tag source from component?

I have some photos I need to get from a back end and show in image tags. Problem is that to get a photo from the server I need to provide a jwt token in the header with the request. So won’t work as he header isn’t provided.

How could I achieve this? Could I have the component request the photos and reference the component as source? Or can I get the photos, save them locally and then use the path as source?

Any tips are greatly appreciated. Thanks

If you control the server, you could do something like S3’s signed urls:

  • send request for filename including jwt in header
  • server returns you a random URL that’s only valid for a period of time
  • you bind <img [src]="signedUrl">
  • server maps requests to signed URLs to return underlying image resource as long as the signed URL is valid

Isn’t this exactly what you are trying to do?