5

i am new to angular 2 , i have an array of images and i want to display all the images in a row but none of them is being displayed even the array is not empty i am using the img tag as shown in the code

html code:

<div fxLayout="column">


    <div >

    </div>

    <div fxLayout="row" *ngIf="doneLoadingProjectData" >
      <div  *ngFor="let image of images" >
          <img src='image'/>
      </div>

    </div>


</div>

enter image description here

mohammad
  • 2,142
  • 7
  • 35
  • 60
  • 1
    ngIf and ngFor can't be used in the same element. Check out this solution for ng-container workaround: http://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error – Z. Bagley Mar 29 '17 at 03:13
  • If [src] is not worked, you have to `Sanitize` the url. – Harish Kommuri Mar 29 '17 at 05:14

2 Answers2

8

Need to use curly brackets when you are assigning value to src attribute 

<div  *ngFor="let image of images" >
  <img src='{{image}}'/>
</div>

Or you can use a template expression:

<img [src]="image" />
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
5

Also I believe that the array of images needs to be array (better to use JSON)of links to the images only then will the image show up on the browser when ngFor is used to display each image

<div *ngIf="images">
<ul>
  <li *ngFor="let image of images">
        <img [src]="image.href" />
  </li>
</ul>

Also I think Maybe a better would be to use ngOnInit so that all initialization is done when that div is called

<div ngOnInit>
<ul>
  <li *ngFor="let image of images">
        <img [src]="image.href" />
  </li>
</ul>

And in the component you can run your code as you wish

 images = [];
 ngOnInit() { type your code here it is similar to a constructor, here you can call your service or factory to get array of images you can initialize images here }

Where the image array is something like this

{ "images" : [ { "name" : "image1", "href" : "http://east-nj1.photos.example.org/987/nj1-1234" }, { "name" : "image2", "href" : "http://east-nj1.photos.example.org/987/nj1-1234" }, { "name" : "image3", "href" : "http://east-nj1.photos.example.org/987/nj1-1234" }, { "name" : "image4", "href" : "http://east-nj1.photos.example.org/987/nj1-1234" } ] }

Copy Paste this blockquote in this link you will get an idea how the data is passed link you can access each property of the JSON value as image.name and image.href. Hope you find this usefull

Akshay Venugopal
  • 451
  • 2
  • 9
  • 22