Как я могу получить изображение из хранилища Firebase и отображать их в Angular 2 ngFor

Question

Я пытаюсь отобразить изображение в * ngFor, которое я загрузил из Firebase Storage.

Мне удалось получить данные изображения из хранилища, но я не знаю, как установить данные изображения в инструкции 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> 

И это код для загрузки изображения. Я написал это в foreach, когда я подписал данные FirebaseListObservable.

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

Тогда я хотел бы, чтобы вы научили меня грамотным изображениям из хранилища Firebase. Какие-либо предложения?

Answer 1

Предполагая, что изображение является уникальным для каждого элемента массива:

<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" на функцию, которая возвращает URL для каждого изображения в элементе массива [src]="getUserProfileImage(request)" например.

И в компоненте:

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

Update Кроме того, это может быть сделано в шаблоне:

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

Answer 2

Сохранить название картины, и короткий путь к базе данных.

Используйте следующий код для загрузки изображения 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.

Я надеюсь, что это помогает кому-то.