Nativescript with angular2, how to retrive a image from protected server

Question

Im using nativescript and angular2 to a simple gallery of images, but the images are under protected server.. in the web app, this is solved by the session cookie.. but here I have to implement a token auth.

I'm downloading the image via :

  get(url: string) {
      let headers = new Headers();
      headers.append("Authorization", "Token " + Config.token);
      return this.http.get(this.base_url+url, { headers: headers, })
  }

in my components:

                this.mediaService.get(obj.url_tn)
                .subscribe(data=> 

                {
                     let file:Blob = new Blob([data.arrayBuffer()]);
                     console.dump(data);
                     let urlFile =  URL.createObjectURL(file );
                     this.photos.push(urlFile) ;

                })

But this gives me an error:

Error: Error in :0:0 caused by: Blob is not defined

I don't know why is too difficult to add headers to a img , how can archive that in easy way?

Thanks

Answer 1

this is how to, but not in nativescript/angular2 way, this is a backend like, using django..

import base64
import mimetypes
from django.http import FileResponse, HttpResponse

    def download(request):

        """
        your way to get your file and original_filename
        """

        type, encoding = mimetypes.guess_type(original_filename)
        if type is None:
            type = 'application/octet-stream'

        if request.GET.get('base64'):
            response =  HttpResponse("data:"+type+";base64,"+base64.b64encode(fobject.read()))
        else:
            response =  FileResponse(fobject)
            response['Content-Type'] = type
            response['Content-Length'] = str(os.stat(file_path).st_size)
            if encoding is not None:
                response['Content-Encoding'] = encoding
        """
        ETC ETC ETC
        """
        return response

Answer 2

NativeScript's http module have a function called getImage(...) .

I haven't tried it myself, but I think you should be able to use it to load the images from your private service:

http://docs.nativescript.org/api-reference/modules/ http .html#getimage

Notice: getImage(...) takes either a URL -string OR an HttpRequestOptions -object.

I suggest creating a pipe for it, like the one I wrote for image-cache: https://gist.github.com/m-abs/9e640e5805a21a842d55e02b291147c5