1
私はこのようなイオン性ビューでプロフィール画像を表示しています:Ionic 3/Angular 5を使用してS3にファイルが存在するかどうかを確認する方法は?
<ion-avatar>
<img [src]="profileImageUrl()">
</ion-avatar>
画像のURLがcomponenteスクリプトから来ている:私は使用して)(ionViewDidLoadでクライアントデータを取得
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";
}
}
お知らせバックエンドサービスコールを呼び出し、S3ファイルまたはクライアントデータがまだロードされていない場合のローカルブランクピクチャのいずれかを返すprofileImageUrl()メソッドを提供します。
しかし、S3ファイルが実際に存在するかどうかも確認したいと思います。そうでない場合は、地元の空白の写真も戻したいと思います。どうすればいい?
あなたの画像を取得するAJAX GETリクエストを送信します。 404エラーが発生した場合、それは存在しないことを意味します。 –
それを試してみてください。 403でOPTIONSリクエストが実行され、失敗し、フォローイングエラーが発生します。https://s3-sa-east-1.amazonaws.com/mybucket/cp1.jpgをロードできませんでした:プリフライトリクエストに対する応答はパスアクセス制御チェック:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、 'http:// localhost:8100'はアクセスが許可されていません。応答にHTTPステータスコード403がありました。 –
https://stackoverflow.com/questions/11315872/allow-ajax-gets-from-amazon-s3-access-control-allow-origin –