Image tag source from component?

Ionic Framework ionic-v3
#1

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

#2

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
#3

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