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");
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments