Angular2 :如何从JSON API向HTML显示图像

Question

我是Ionic新手，目前正在开发一个电子商务移动应用程序。我正在使用JSON API，我可以从API中获取除图像之外的所有数据，我不能显示来自JSON API的图像。我不知道如何将图像显示到我的HTML中。希望有谁能帮助我，提前谢谢你。下面是JSON API的外观：

product: [
        {
        prod_id: 1,
        supplier_id: 8,
        prod_name: "Hippo + Friends Baby Boy Triangle Merino Pant",
        prod_price: "250",
        prod_stock: "20",
        prod_image: "assets/img/4ef1ef51ef6e2f0142452af60048df44Merino Pants.jpg"
    }
    ]

Answer 1

.html文件

<img [src]="getImageUri(product.prod_image)"
     alt="Image preview...">

.ts文件

getImageUri(image: string): string {
  if (!image) {
    image = `/assets/img/noimage.jpg`;
  }

  const uri = `${environment.assets}/${image}`;
  return uri;
}

environment.assets将是映像的主机位置。

示例environment.assets = http://hostlocation.com/images;

我假设，由于这是一个电子商务网站，你不会捆绑你的图片与应用程序，因为它们将通过某种CMS处理。

Answer 2

您可以将其绑定到img标签上：

<div *ngFor="let pr of product">
    <img [src]="pr.prod_image" />
<div>

如果你没有托管图片并且想通过api发送图片，你可以将字节作为base64字符串嵌入到图片标签中：

<img src="data:image/png;base64, BytesHere=="  />

Answer 3

您可以通过json response发送图片url，并使用标准<img src="...">从服务器获取并显示图片。