Nativescript：使用 ListView 显示来自集合/数组的 url 数组中的图像答案

【问题标题】：Nativescript: Display image from url array from a collection/array using ListViewNativescript：使用 ListView 显示来自集合/数组的 url 数组中的图像
【发布时间】：2017-07-01 08:45:48
【问题描述】：

这是我从 REST API 获得的 JSON 数据：

[{ “名称”：“宣威”， “字段2”：“值2”， "field3": "value3", “图片”： [{ “图像”：“url1”，“图像”：“url2”....}] “字段N”：“值N” }]

...我在页面上有以下 ListItem：

   <ListView [items]="propertyList" class="image-list" (loaded)="onListViewLoaded($event)">
     <ng-template let-item="item">
       <StackLayout style="height: 200" (tap)="onItemTap(item.id)"
         id="{{item.id}}" (loaded)="onItemLoaded($event, item.images)">
         <StackLayout class="image-container">
           <Image [src]="item.images[0].image" stretch="aspectFill" class="image-content-container"></Image>
         </StackLayout>
         <StackLayout class="image-caption-container">
           <Label id="{{item.id}}"
             [text]="item.propertyName"
               class="image-caption"></Label>
           <Label class="gh-list-description-sub" text="{{item.propertyType}}" textWrap="true"></Label>
         </StackLayout>
       </StackLayout>
     </ng-template>
   </ListView>

...但问题是填充列表项后图像不显示。不过，“标签”正在显示。我在代码隐藏上尝试了 data/observable：

导出类 MainComponent 扩展 Observable 实现 OnInit, AfterViewInit { private propertyList = new ObservableArray(); ...这里还有一些其他代码

但我哪儿也不去。

需要帮助。

【问题讨论】：

标签： image listview observable nativescript

【解决方案1】：

我在最新的 NativeScript 版本 3.1 中看到了在 ListView 上使用 Image 的一些奇怪行为在您向下和向上滚动之前不会显示图像！

作为一种解决方法，您可以使用 nativescript-web-image-cache 插件中的 WebImage 组件。

首先安装它：

tns plugin add nativescript-web-image-cache

在你的根组件 AppComponent、app.component.ts 上初始化插件：

import { Component } from "@angular/core";
import { OnInit } from '@angular/core/core';
import { initializeOnAngular } from 'nativescript-web-image-cache';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent implements OnInit {
    ngOnInit():void {
        initializeOnAngular();
    }
}

在您的模板中，将 Image 替换为 WebImage：

<StackLayout class="image-container">
           <WebImage [src]="item.images[0].image" stretch="aspectFill" class="image-content-container"></WebImage>
         </StackLayout>

【讨论】：