Nativescript - Access img src that needs authorization

Question

I'm trying to display an image that is secured with help of OAuth in Nativescript.

<Image src="url-to-secured-image"></Image>

So I need to add the jwt token to the header in some way in the request. I looked around and found angular-img-http-src. But this is not for Angular2. Isn't this supported by default in Angular2 in some way?

score 2 · Answer 1 · answered Feb 26 '17 at 13:43

2

You can use the plugin https://github.com/NathanWalker/ng2-image-lazy-load

// view template
<div imageLazyLoadArea [imageLazyLoadConfig]="lazyLoadConfig">
  <div *ngFor="let image of images">
    <img [imageLazyLoadItem]="image.url"/>
  </div>
</div>

// Component
public lazyLoadConfig: IImageLazyLoadConfig = {
  headers: {
    'Authorization': 'Bearer auth-token'
  },
  loadingClass: 'custom-loading',
  loadedClass: 'custom-loaded',
  errorClass: 'custom-error'
};

answered Feb 26 '17 at 13:43

Habeeb

1,020
16
35

1

Maybe I need to add that. But I'm not very happy about adding yet another dependency to do something basic that I think should be supported by default in NativeScript. At the moment I'm hoping to solve this by fetching a ArrayBuffer from the backend and stick that to the Image somehow. – user1716970 Feb 26 '17 at 19:35
Are you going to use similar solution? http://stackoverflow.com/questions/36152917/get-image-or-byte-data-with-http . This is another way. – Habeeb Feb 26 '17 at 19:37
Yes, I'm hoping to do something similar. But not having much luck with it a the moment. I'm getting back an ArrayBuffer by the server and I'm supposing that I should convert that to an ImageSource somehow. But I'm having creating the ImageSource from the ArrayBuffer. – user1716970 Feb 26 '17 at 19:44
Just thought worth mentioning that I Couldn't get this to work in NativeScript – Ophir Stern Sep 26 '17 at 13:17

score 2 · Answer 2 · answered Feb 26 '17 at 21:01

I found a simple solution to this. Since I'm using NativeScript it was possible for me to use HttpModule.getImage() to get the image from the backend with authentication headers. Here is an example: https://www.thepolyglotdeveloper.com/2016/02/use-the-http-module-instead-of-fetch-in-nativescript/

Then I stick the resulting imageSource to Image.src in the html code.

Nativescript - Access img src that needs authorization

2 Answers2