如何从Firebase存储中显示图片，而不必在循环中重复图片 [英] How can I display an image from Firebase Storage without repeating image in the loop

问题描述

如何从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

您必须将该图像保存到您的数组元素中：

< pre class =lang-js prettyprint-override> 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>

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>

这篇关于如何从Firebase存储中显示图片，而不必在循环中重复图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！