Nativescript - 访问需要授权的 img src答案

【问题标题】：Nativescript - Access img src that needs authorizationNativescript - 访问需要授权的 img src
【发布时间】：2017-02-27 05:01:35
【问题描述】：

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

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

所以我需要在请求中以某种方式将 jwt 令牌添加到标头中。我环顾四周，发现了 angular-img-http-src。但这不适用于 Angular2。这在 Angular2 中以某种方式默认不支持吗？

【问题讨论】：

标签： angular nativescript

【解决方案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'
};

【讨论】：

也许我需要补充一下。但是我不太高兴添加另一个依赖项来做一些我认为在 NativeScript 中默认应该支持的基本操作。目前我希望通过从后端获取 ArrayBuffer 并以某种方式将其粘贴到 Image 来解决这个问题。
你会使用类似的解决方案吗？ stackoverflow.com/questions/36152917/… 。这是另一种方式。
是的，我希望做类似的事情。但暂时没有太多运气。我正在通过服务器取回一个 ArrayBuffer ，我想我应该以某种方式将它转换为 ImageSource 。但我正在从 ArrayBuffer 创建 ImageSource。
只是觉得值得一提的是，我无法在 NativeScript 中使用它

【解决方案2】：

我找到了一个简单的解决方案。由于我使用的是 NativeScript，因此我可以使用 HttpModule.getImage() 从后端获取带有身份验证标头的图像。这是一个例子： https://www.thepolyglotdeveloper.com/2016/02/use-the-http-module-instead-of-fetch-in-nativescript/

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

【讨论】：