如何從Firebase存儲中獲取圖像並將其顯示在Angular 2中ngFor

我試圖在從Firebase存儲中下載的* ngFor中顯示圖像。如何從Firebase存儲中獲取圖像並將其顯示在Angular 2中ngFor

我成功地從存儲中獲取圖像數據，但我不知道如何在ngFor語句中設置圖像數據。

讓我告訴你我的代碼在這裏。

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)"> 
    <ons-row> 
     <ons-col width="20%"><img [src]="userProfileImg"></ons-col> 
     <ons-col style="padding-left:20px;"> 
     <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p> 
     </ons-col> 
    </ons-row> 
</ons-list-item>

這是下載圖片的代碼。當我訂閱了FirebaseListObservable數據時，我在foreach中寫了這個。

getProfileImageUrl(userId: string) { 
    const userStorageRef = firebase.storage().ref().child('images/users/' + userId + "_users.jpg"); 
    userStorageRef.getDownloadURL().then(url => { 
     this.userProfileImg = url 
    }); 
    }

然後，我希望你教我如何從Firebase存儲中識別圖像。有什麼建議麼？

來源

2016-12-09 taku845

對於您正在迭代的數組中的每個項目，圖像是否是唯一的？從上面的代碼看來，您顯示的是所有行的相同圖像。 – borislemke

假設圖像是唯一的每個數組元素：

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)"> 
    <ons-row> 
     <ons-col width="20%"><img [src]="userProfileImg"></ons-col> 
     <ons-col style="padding-left:20px;"> 
     <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p> 
     </ons-col> 
    </ons-row> 
</ons-list-item>

你應該改變[src]="userProfileImg"到的是，在數組項e.g [src]="getUserProfileImage(request)"返回網址爲每個圖像的功能。

而在你的組件：

... 
getUserProfileImage(request: TypeOfRequestHere) { 
    return 'images/users/' + request.userId + '_users.jpg'; 
} 
...

更新或者，這可以在模板中進行：

[src]="'images/users/' + request.userId + '_users.jpg'"

來源

2016-12-09 08:16:26 borislemke

謝謝你的幫助，它的作品！ – taku845

@taku樂於助人！ – borislemke

@taku考慮選擇我的答案爲「接受」，如果它確實爲其他人看到。謝謝！ – borislemke

圖片的保存名稱，併到你的數據庫短路徑。

使用以下代碼上傳base64圖像;

uploadImage(name, data) { 
    let promise = new Promise((res,rej) => { 
     let fileName = name + ".jpg"; 
     let uploadTask = firebase.storage().ref(`/posts/${fileName}`).put(data); 
     uploadTask.on('state_changed', function(snapshot) { 
     }, function(error) { 
      rej(error); 
     }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
      res(downloadURL); 
     }); 
    }); 
    return promise; 
}

它只是2行代碼，用權限安全地獲得實際的url。

this.storageRef = firebase.storage().ref().child('images/image.png'); 
this.storageRef.getDownloadURL().then(url => console.log(url));

如果您需要更多的像optons傳遞字符串，URI的等，你可以檢出my blog post about uploading, and getting data from firebase storage using angularfire2.

我希望它可以幫助別人。

來源

2017-04-11 02:27:49 MmtBkn

如何從Firebase存儲中獲取圖像並將其顯示在Angular 2中ngFor

回答

相關問題