how to declare Array of image in angular 2

Question

I'm trying to call a image from array of object, for this purpose I have written below code

product: any[] = [{
    id: 121, name: "iphone", url: 'https://www.gstatic.com/webp/gallery3/1.png'
}] //I tried locale file path also

And calling this image like below

<div *ngFor="let list of product">
    {{list.url}}
</div>

but it is not showing image rather than it showing only string. Could any one please let me know how to call a image which is defined in array

Pardeep Jain · Accepted Answer · 2018-06-26 07:01:22Z

3

You need to use img tag to render image into view part within your iteration.

Try this -

<div *ngFor="let list of product">
    <img [src]='list.url' />
</div>

Working example

answered Jun 26, 2018 at 7:01

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

Tabrez Ahmed · Accepted Answer · 2018-06-26 07:51:46Z

2

Put URL in <img> tag with source binding:

<div *ngFor="let list of product">
    <img [src]='list.url' [alt]='list.name'/>
</div>

Tabrez Ahmed

3,0007 gold badges35 silver badges51 bronze badges

answered Jun 26, 2018 at 7:10

Akj

7,2513 gold badges31 silver badges41 bronze badges

Krishna Rathore · Accepted Answer · 2018-06-26 07:12:10Z

0

you can try this solution

<div *ngFor="let list of product">
    <img [src]='list.url'/>
</div

answered Jun 26, 2018 at 7:12

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges