时间戳

首页 > 解决方案 > 在一个 .Json 对象中添加两个图像

arrays - 在一个 .Json 对象中添加两个图像

问题描述

我正在使用 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”时却不能。

我明白了：

手机模拟器截图

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

标签： arraysjsonionic-frameworkmobileionic3

解决方案

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

推荐阅读