Angular2 : How to display image to HTML from JSON API

Question

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

prod_image just returns a string to a relative path, you actually don't get the image back in this api, just a reference string to the image. You can send the image back as a blob type and then display it — Surreal
– Surreal, Commented Sep 1, 2017 at 14:37
thanks for the response, can I ask how can I send the image as a blob type in PHP? — noob
– noob, Commented Sep 1, 2017 at 14:41
I am not too familiar with PHP, so I would not be much of a help here, if you can't find a solution perhaps ask another question with a more defined scope — Surreal
– Surreal, Commented Sep 1, 2017 at 14:43
You need to send json like this from the server. if you want to reduce your code. prod_image: "http : //serveraddress/filepath/filename" otherwise it will return as a string. — rahul patel
– rahul patel, Commented Sep 1, 2017 at 15:18

VtoCorleone · Accepted Answer · 2017-09-01 16:38:16Z

1

.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.

edited Sep 1, 2017 at 16:38

answered Sep 1, 2017 at 14:40

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vijayvithal · Accepted Answer · 2017-09-01 14:40:56Z

0

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

answered Sep 1, 2017 at 14:40

vijayvithal

5811 gold badge5 silver badges19 bronze badges

Comments

YD1m · Accepted Answer · 2017-09-01 14:42:23Z

0

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=="  />

edited Sep 1, 2017 at 14:42

answered Sep 1, 2017 at 14:37

YD1m

5,9152 gold badges22 silver badges25 bronze badges

3 Comments

Surreal Over a year ago

I think his question was more related to getting the image back from the API as opposed to binding it

YD1m Over a year ago

It can be done with base64 string containin image bytes and background image style.

noob Over a year ago

Thank you @YD1m, I already tried base64 but did not work for me. <img [src]="DomSanitizer.bypassSecurityTrustUrl('data:image/JPEG;base64,' + item.image)" alt="..." >

Collectives™ on Stack Overflow

Angular2 : How to display image to HTML from JSON API

3 Answers 3

Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Related