How can I get image from Firebase Storage and display them in Angular 2 ngFor

Question

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?

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
– borislemke, Commented Dec 9, 2016 at 8:12

Mohamed · Accepted Answer · 2017-04-11 02:27:49Z

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.

borislemke · Accepted Answer · 2016-12-11 06:43:05Z

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

edited Dec 11, 2016 at 6:43

answered Dec 9, 2016 at 8:16

borislemke

9,1965 gold badges43 silver badges56 bronze badges

4 Comments

borislemke Over a year ago

@taku happy to be helpful!

borislemke Over a year ago

@taku consider selecting my answer as "Accepted" if it did work for others to see. Thanks!

taku845 Over a year ago

Hi, do you think this is a secure way?

sdaugherty Over a year ago

A little confused by this answer. Wasn't the question to retrieve the url from firebase storage? Doesn't this just retrieve a static string / image that would not be served from firebase storage, but instead stored directly in the app?

Collectives™ on Stack Overflow

How can I get image from Firebase Storage and display them in Angular 2 ngFor

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related