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

【问题标题】：Angular2 : How to display image to HTML from JSON APIAngular2：如何从 JSON API 将图像显示为 HTML
【发布时间】：2018-02-10 15:45:10
【问题描述】：

我是 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"
    }
    ]

【问题讨论】：

prod_image 只是将一个字符串返回到一个相对路径，你实际上并没有在这个 api 中取回图像，只是一个图像的引用字符串。您可以将图像作为 blob 类型发回，然后显示它
感谢回复，请问如何在 PHP 中将图像作为 blob 类型发送？
我对 PHP 不太熟悉，所以在这里我不会有太大帮助，如果您找不到解决方案，也许可以问另一个范围更明确的问题
没关系，非常感谢您的回复。
你需要从服务器发送这样的json。如果你想减少你的代码。 prod_image: "http : //serveraddress/filepath/filename" 否则它将作为字符串返回。

标签： javascript html json ionic2

【解决方案1】：

你可以绑定到img标签：

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

如果您不托管图像并希望通过 api 发送它，您可以将字节嵌入图像标签作为 base64 字符串：

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

【讨论】：

我认为他的问题与从 API 取回图像有关，而不是绑定它
可以使用包含图片字节和背景图片样式的base64字符串来完成。
谢谢@YD1m，我已经尝试过base64，但对我不起作用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

.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 进行处理。

【讨论】：