3

I'm trying to display image in *ngFor which I downloaded from Firebase Storage.

I succeeded fetching image data from storage, but I don't know how to set image data in ngFor statement.

Let me show you my code here.

<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>

And this is the code to download image. I wrote this one in foreach when I subscribed FirebaseListObservable data. 

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

Then I'd like you to teach me how to literate images from Firebase Storage. Any suggestions?

AL.
  • 36,815
  • 10
  • 142
  • 281
taku845
  • 133
  • 1
  • 3
  • 11
  • Is the image unique to each item in the array you are iterating? From the above code it seems that you are showing the same image for all rows. – borislemke Dec 09 '16 at 08:12

2 Answers2

4

Save name of the picture, and short path to your database.

Use following code to upload base64 image;

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;
 }

it's just 2 lines of code to get actual url securely with permissions.

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

If you need more optons like passing strings, URI's etc, you can checkout my blog post about uploading, and getting data from firebase storage using angularfire2.

I hope it helps somebody.

Mohamed
  • 1,251
  • 3
  • 15
  • 36
0

Assuming the image is unique to each array element:

<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>

You should change [src]="userProfileImg" to a function that returns the URL for each image in the array item e.g [src]="getUserProfileImage(request)".

And in your component:

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

Update Alternatively, this can be done in the template:

[src]="'images/users/' + request.userId + '_users.jpg'"
borislemke
  • 8,446
  • 5
  • 41
  • 54