1
Ich bin ein Profilbild in einer ionischen Ansicht wie diese zeigen:Wie überprüfe ich, ob die Datei in S3 mit Ionic 3/Angular 5 existiert?
<ion-avatar>
<img [src]="profileImageUrl()">
</ion-avatar>
Die Bild-URL aus dem componente Skript kommt:
ionViewDidLoad() {
let email = this.storage.getLocalUser().email;
this.clientService.findByEmail(email)
.subscribe(resp => {
this.client = resp;
},
error => {
});
}
profileImageUrl() {
if (this.client) {
return `${API_CONFIG.bucketBaseUrl}/client${this.client.id}.jpg`;
}
else {
return "assets/imgs/avatar-blank.png";
}
}
Beachten Sie, dass ich Client-Daten in ionViewDidLoad get() mit einen Back-End-Serviceaufruf und stellen Sie dann eine profileImageUrl() -Methode bereit, die entweder die S3-Datei oder ein lokales leeres Bild zurückgibt, falls die Clientdaten noch nicht geladen wurden.
Ich möchte jedoch auch überprüfen, ob die S3-Datei tatsächlich existiert. Wenn nicht, möchte ich auch das lokale leere Bild zurückgeben. Wie würde ich das tun?
senden Sie eine AJAX GET-Anfrage, um Ihr Image zu erhalten. Wenn Sie einen Fehler 404 erhalten, bedeutet dies, dass es nicht existiert. –
Versuchte das. Eine OPTIONS-Anfrage wird ausgeführt und ist mit 403 fehlgeschlagen, und dann wird folgender Fehler angezeigt: https://s3-sa-east-1.amazonaws.com/mybucket/cp1.jpg konnte nicht geladen werden: Die Antwort auf die Preflight-Anfrage funktioniert nicht Pass-Zugangskontrollprüfung: Auf der angeforderten Ressource ist kein 'Access-Control-Allow-Origin'-Header vorhanden. Origin 'http: // localhost: 8100' ist daher nicht erlaubt. Die Antwort hatte den HTTP-Statuscode 403. –
https://stackoverflow.com/questions/11315872/allow-ajax-gets-from-amazon-s3-access-control-allow-origin –