gurkis gurkis - 1 month ago 13
Javascript Question

Display 10 unique pictures from source.unsplash.com inside a ngFor loop

I am using *ngFor to repeat a img tag trying to show 10 unique pictures from the unsplash API. My code looks like this:

<div *ngFor="let a of myArray; let index = index">
<div class="thumbnail">
<img src={{a}}>
</div>
</div>


myArray consist of 10 strings with the same link: https://source.unsplash.com/category/x where x is taken from a user input field. An example of x could be nature or food. Every time I go to https://source.unsplash.com/category/nature I get a different picture displayed but in my app it shows the same picture 10 times.

It seems like my app is only accessing the link one time and then repeats the image 10 times, how do i make it so the 10 images are all unique?

Answer

It should be: <img src={{a.url}}> where a is each item in your myArray array.