html - How to load images in angular2 -

hello new angular 2 . in small project , have set images. app.component.ts

`

import { component, oninit } '@angular/core'; @component({   selector: 'app-hero',   templateurl: './hero.component.html',   styleurls: ['./hero.component.css'] }) export class herocomponent implements oninit { fullimagepath: string; constructor() {     this.fullimagepath = '/assets/imges/therealdealportfoliohero.jpg'   } ngoninit() {   } } 

`

and html `

<div class="row">     <div class="col-xs-12">         <img [src]="fullimagepath">     </div> </div> 

`

but in process have declare images in separate variable.but want declare array ,and load , use them `

<div class="row">     <div class="col-xs-12">         <img [src]="fullimagepath/(myimagename)">     </div> </div> 

`

you can use *ngfor if want iterate through array. example, if have array of image paths:

this.imagepaths = ['image/path/1.png', 'image/path/2.png', 'image/path/3.png']  

you can in html:

<div class="row">     <div class="col-xs-12">         <div *ngfor="let path of imagepaths">            <img [src]="path">         </div>     </div> </div> 

if want iterate through array of image names can way:

if array image names while having base url:

this.imageurl = '/assets/images/'; this.images = ['1.png', '2.png', '3.png']; 

you can way:

<div class="row">     <div class="col-xs-12">         <div *ngfor="let image of images">            <img src="{{imageurl + image}}">         </div>     </div> </div> 

or, if haven't set imageurl property, can this:

<div class="row">         <div class="col-xs-12">             <div *ngfor="let image of images">                <img src="/assets/images/{{image}}">             </div>         </div>     </div>