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>