Getting image from url located in JSON

Question

I need to extract the url and to show it as a pictures:

How it looks from json:

My html:

<ul>
  <li *ngFor="let product of store.Products">

    <p>Product ProductImage: {{ product.ProductImage }}</p>
    <p>Product Price: {{ product.Price }}</p>

  </li>
</ul>

Can I do it with pipe?

aren't you supposed to use the **** tag to show it as an image ? write it as `` — Richard Pariath, Oct 19 '18 at 09:50
It didn't work with it. but know I did like you say and its fine thanks!! — Eitan Jacobs, Oct 19 '18 at 10:06
[Refer to this article for iterating img](https://stackoverflow.com/questions/40797925/how-to-bind-img-src-in-angular-2-in-ngfor) using ngFor. In my experience it should work because I have tested it. — Richard Pariath, Oct 19 '18 at 10:10

Sajeetharan · Answer 1 · 2018-10-19T09:33:12.207

1

i see a space in the json you provided, you need

<p>Product ProductImage: {{ product["Product ProductImage"] }}</p>
<p>Product Price: {{ product.Price }}</p>

you need to replace with image tag if you want to see an image

  <p><img [src]="product["Product ProductImage"]" /></p>
  <p>Product Price: {{ product.Price }}</p>

edited Oct 19 '18 at 09:33

answered Oct 19 '18 at 09:16

Sajeetharan

216,225
63
350
396

thanks. I am not sure I understand (the syntex of {{ product["Product ProductImage"] }}) – Eitan Jacobs Oct 19 '18 at 09:20
since you have a space between Product and ProductImage, you need to use [""] instead of dot operator – Sajeetharan Oct 19 '18 at 09:22
Am I missing something? Thank you
– Eitan Jacobs Oct 19 '18 at 09:46
try this – Sajeetharan Oct 19 '18 at 09:47
can you post the json that you are getting? – Sajeetharan Oct 19 '18 at 09:56

Getting image from url located in JSON

1 Answers1