2017-12-18 12 views
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ファイルが実際に存在するかどうかも確認したいと思います。そうでない場合は、地元の空白の写真も戻したいと思います。どうすればいい?

+1

あなたの画像を取得するAJAX GETリクエストを送信します。 404エラーが発生した場合、それは存在しないことを意味します。 –

+0

それを試してみてください。 403でOPTIONSリクエストが実行され、失敗し、フォローイングエラーが発生します。https://s3-sa-east-1.amazonaws.com/mybucket/cp1.jpgをロードできませんでした:プリフライトリクエストに対する応答はパスアクセス制御チェック:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。したがって、 'http:// localhost:8100'はアクセスが許可されていません。応答にHTTPステータスコード403がありました。 –

+0

https://stackoverflow.com/questions/11315872/allow-ajax-gets-from-amazon-s3-access-control-allow-origin –

答えて

0

問題が見つかりました:実際には私のS3バケットのCors設定はすでにokです。問題は、私のget要求で "Authorization"ヘッダーを送信できないことです。 S3バケットにリクエストを送信する際にAuthorizationヘッダーを含めないために、認証インターセプタを変更する必要がありました。

関連する問題