Nativescript - 访问需要授权的img src

Question

我正在尝试在Nativescript中显示借助OAuth保护的图像。

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

所以我需要在请求中以某种方式将jwt标记添加到标头中。 我环顾四周，找到了angular-img-http-src。但这不适用于Angular2。默认情况下Angular2中是否支持这种方式？

Answer 1

您可以使用该插件 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'
};

Answer 2

我找到了一个简单的解决方案。 由于我使用的是NativeScript，因此我可以使用HttpModule.getImage（）从后端获取带有身份验证标头的图像。 这是一个例子： fourth part

然后我将生成的imageSource粘贴到html代码中的Image.src。