Error while displaying images from firebase storage in a grid


#1

I used the following link to store images in firebase storage,but on clicking show images,i am not able to find the photos in a grid,particularly nothing happens on clicking of button .On console,log(URL) ,I found that the URL is [].,but on seeing the firebase storage,I found that the images are stored their,with the respective user Id…


export class HomePage {


private images = [];
  imageUrls = [];

  cameraOptions: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  };
  constructor(public navCtrl: NavController,public auth:AngularFireAuth,private camera: Camera, private imageSrv: ImageProvider) 

  {
    let data = localStorage.getItem('images');
    if (data) {
      this.images = JSON.parse(data);
    }
  }

  takePicture() {
    this.camera.getPicture(this.cameraOptions)
      .then(data => {
        let base64Image = 'data:image/jpeg;base64,';

        return this.imageSrv.uploadImage(base64Image, this.auth.auth.currentUser.uid);
      })
      .then(data => {
        this.images.push(data.a.name);
        localStorage.setItem('images', JSON.stringify(this.images));
        this.downloadImageUrls();
      });
  }

  

  private downloadImageUrls() {
    let promiseList = [];
    for (let i = 0; i < this.images.length; i++) {
      let promise = this.imageSrv.getImage(this.auth.auth.currentUser.uid, this.images[i]);
      promiseList.push(promise);
    }

    Promise.all(promiseList)
      .then(urls => {
        this.imageUrls = urls;
        console.log(urls);
      });
  }

#2

You topic title mentions an error. What is the error?


#3

There is no error…the output on console is[ ]which is empty… there is no
error on clicking the button…but nothing happen either… is the image size
issue… that it is not been displayed in a grid


#4

What is this? This is not defined in the constructor. No idea how it works or if it e.g. returns a Promise.
Why is there an empty line after the constructor and its ’ {’ ?
What is this.imageSrv.getImage? Looks like this should return the image(s)…


#5

Hi vithika,

I have the same issue. How do you resolve that?