CODEWITHSUNDEEP
javascripthtmljsonionic2
noob
noob

Reputation: 261

Angular2 : How to display image to HTML from JSON API

I am new to Ionic and currently developing an e-commerce mobile app. I am using JSON API, I can get all the data from the API except the image, I cannot display the image coming from the JSON API. I have no idea how can I display the image to my HTML. Hope anyone can help me, thank you in advance. Here is how the JSON API looks like:

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

Upvotes: 1

Views: 1873

Answers (3)

VtoCorleone
VtoCorleone

Reputation: 17203

.html file

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

.ts file

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

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

environment.assets would be the host location of the image.

Example environment.assets = http://hostlocation.com/images;

I'm assuming since this is an e-commerce site that you aren't bundling your images with the app as they will be handled through some kind of CMS.

Upvotes: 1

YD1m
YD1m

Reputation: 5895

Tou can bind it to img tag:

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

If you don't host image and want to send it by api you can embed bytes to image tag as base64 string:

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

Upvotes: 0

vijayvithal
vijayvithal

Reputation: 581

You can send the image url via json response and use standard <img src="..."> to fetch and display the image from the server.

Upvotes: 0

Related Questions