如何从Firebase存储中显示图片，而不必在循环中重复图片

本文介绍了如何从Firebase存储中显示图片，而不必在循环中重复图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 如何从Firebase存储中显示图片，而不必在循环中重复图片？我成功地从存储中获取图像数据，但无法将图像显示为该数组中的不同图像。它只是在循环中返回相同的图像。 HTML < div * ngFor =让列表清单class =row> < img [src] =imageUrl/> < / div> JavaScript ngOnInit（）{ this.listings = []; this.listingss = []; $（b） $ b this.firebaseService.getListings（）。subscribe（（data：any）=> { data.forEach（listing => { this。 listing = listing this.listings.push（listing）; //列出的记录 console.log（列表）; // get参考 let storageRef = firebase.storage（）。ref（）; //存放路径 let spaceRef = storageRef.child（listings.path）; //记录的图像 // console.log（'images：'，listings.path）; //下载网址 storageRef.child（listings.path）.getDownloadURL（ ）。（url）=> { // url是我们的firebase路径，我们以var imageUrl存储 this.imageUrl = url; //推出数据列表数组// // this.listingss.push（listings）; console.log（url）; console.log（这是成功）; 解决方案您正在覆盖 imageUrl 您必须将该图像保存到您的数组元素中： listings.imageUrl = url; < div * ngFor =让列表清单class =row> < img [src] =list.imageUrl/> < / div> 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>JavaScriptngOnInit() { 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> 这篇关于如何从Firebase存储中显示图片，而不必在循环中重复图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！