Show image from Firebase storage by retrieving URL Ionic


#1

I am trying to retrieve an image which is a URL which was generated by the user when they signed up. This image then is used by the user to sign in but I cant get the image to display on the application. Any help would be greatly appreciated and below is my code

My QrCode.ts

declare var require: any;
var img;

@Component({
  selector: 'page-QRPage',
  templateUrl: 'QRPage.html'
})
export class QRPagePage {
  user:Observable<User[]>;
  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage,private userService: UserService) {
    storage.get('id').then((val) => {
      this.user=userService.getUser(val);
    });
  }

  ionViewDidLoad() {
    this.storage.get('user_id').then((val) => {
    var storageRef = firebase.storage().ref('/images/'+val);

    storageRef.getDownloadURL().then(function(url) {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function(event) {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element:
    this.img = document.getElementById('myimg');
    img.src = url;
  }).catch(function(error) {
    // Handle any errors
  });
})
  }
}

Then my html file

<ion-header>
    <ion-navbar>
      <ion-title>
        QR Code
      </ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content padding>
    <ion-list>
      <ion-item>
        <img [src]="myimg">
      </ion-item>
    </ion-list>
  </ion-content>