1

How can I display a image from Firebase Storage without repeating the image in the loop? I succeeded in fetching the image data from storage but cannot display the images as a different image in that array. It just returns the same image in the loop.

HTML

<div *ngFor="let list of listings"class="row">
  <img [src]="imageUrl"/>
</div>

JavaScript

ngOnInit() {

    this.listings = [];
    this.listingss = [];

    this.firebaseService.getListings().subscribe((data: any) => {

          data.forEach(listings => {
                this.listing = listings
                this.listings.push(listings);

                //listings logged
                console.log(listings);

                // get the reference
                let storageRef = firebase.storage().ref();
                //store the path
                let spaceRef = storageRef.child(listings.path);
                //Images logged
                // console.log('images:', listings.path);

                //download the url
                storageRef.child(listings.path).getDownloadURL().then((url) => {

                      //url is our firebase path which we store as a var imageUrl
                      this.imageUrl = url;

                      //push out the listings array of data//
                      // this.listingss.push(listings);
                      console.log(url);
                      console.log("this was a success");
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
John Tyrrell
  • 13
  • 3

1 Answers1

0

You are overwriting that imageUrl property everytime.

You have to save that image into your array-element:

listings.imageUrl = url;

<div *ngFor="let list of listings"class="row">
  <img [src]="list.imageUrl"/>
</div>
slaesh
  • 16,659
  • 6
  • 50
  • 52