在一个 .Json 对象中添加两个图像答案

【问题标题】：Adding two images in one .Json Object在一个 .Json 对象中添加两个图像
【发布时间】：2019-01-16 06:43:12
【问题描述】：

我正在使用 Ionic 3 构建一个移动应用程序，并尝试使用数组在一个离子卡中显示一些图像。

HTML：

<ion-card>
    <img [src]="productDetails.images"/>
    <ion-card-header>
      Description
    </ion-card-header>
    <ion-card-content>
      {{productDetails.description}}
    </ion-card-content>
</ion-card>

JSON 文件：

[
  {
    "id": "1",
    "name": "Oreo",
    "description": "Our pre-shrunk organic cotton t-shirt, with its slightly fitted waist and elegant V-neck is designed to flatter. Youll want one in every color!",
    "price": "520.00",
    "image": "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg",
    "images": [
      "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg", 
      "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg"
    ],
    "bestSeller": true,
  }
]

使用“productDetails.image”时我只能成功显示一张图片，但尝试使用“productDetails.images”时却不能。

我明白了：

Mobile Emulator Screenshot

我的问题是，是否可以同时显示两个图像？还是唯一的选择是创建更多对象值并手动显示它们？

【问题讨论】：

标签： arrays json ionic-framework mobile ionic3

【解决方案1】：

如果要显示 productDetails 中的所有图像，则需要使用以下修改后的 HTML 代码：

<ion-card>
  <div *ngFor="let productImage of productDetails[0].images let i = index" >
     <img [src]="productImage" />
  </div>
  <ion-card-header>
     Description
  </ion-card-header>
  <ion-card-content>
     {{productDetails.description}}
  </ion-card-content>
</ion-card>

【讨论】：

【解决方案2】：

好吧，因为 productDetails.images 是一个数组，因此当您使用它时，您不会返回到图像的链接，而是链接数组本身，所以如果您使用 productDetails.images[0] 那么您会有第一张图片等

【讨论】：