I m using image picker to pick image and storing in firebase. I want to show image in html how can i show the image in html ?

pickImageFromGallery() {

this.imagePicker.getPictures({ maximumImagesCount: 1, outputType: 1 }).then((res) => {
  if (res) {
    if (res.length > 0) {
      debugger;
      this.helper.load();
      const image = `data:image/jpeg;base64,${res}`;
      let id=Date.now();
      const pictures = this.storage.ref('deal/' + id);
      pictures.putString(image, 'data_url').then(r => {
        r.ref.getDownloadURL().then(r => {
          this.deal = r
          this.helper.dismiss();
          this.helper.toast('Uploaded');

        });
      }, err => {
        this.helper.dismiss();
        console.log(err);
      });
    } else {
      this.helper.toast('you didnt selected any image from the gallary');
      this.helper.dismiss();
    }

  } else {
    this.helper.toast('you didnt selected any image from the gallary');
    this.helper.dismiss();
  }
  //this.user.photo='data:image/jpeg;base64,'+res;


}, (err) => {
  console.log('failed to get images from gallery');

});
 }

As in code the imgage URL Is saving in this.deal. I also try to show like this

  <ion-img (click)="setImage()" style="width:120px;height:120px"  [src]="deal ||  'https://cdn.dribbble.com/users/21845/screenshots/3938419/placeholder.png'" height="120px"></ion-img>

0 Answers