Question

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

my-icons

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

Tou可以将它绑定到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响应发送图片网址，并使用标准<img src="...">从服务器获取并显示图片。

Angular2：如何从JSON API将图像显示为HTML

3 个答案: