1

I'm showing a profile image in an Ionic view like this:

<ion-avatar>
  <img [src]="profileImageUrl()">
</ion-avatar>

The image url comes from the componente script:

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";
  }
}

Notice that I get client data in ionViewDidLoad() using a backend service call, and then provide a profileImageUrl() method that returns either the S3 file, or a local blank picture in case client data hasn't been loaded yet.

However, I'd like to also check if the S3 file actually exists. If not, I'd like to also return the local blank picture as well. How would I do this?

Nelio Alves
  • 1,231
  • 13
  • 34
  • 1
    send an AJAX GET request to get your image. If you get a 404 error, it means it doesn't exist. – JB Nizet Dec 18 '17 at 18:25
  • Tried that. An OPTIONS request is performed and failed with 403, and then I get the folloing error: Failed to load https://s3-sa-east-1.amazonaws.com/mybucket/cp1.jpg: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 403. – Nelio Alves Dec 18 '17 at 18:42
  • https://stackoverflow.com/questions/11315872/allow-ajax-gets-from-amazon-s3-access-control-allow-origin – JB Nizet Dec 18 '17 at 18:43

1 Answers1

0

Found the problem: actually the Cors configurations of my S3 bucket were already ok. The problem is that I can't send the "Authorization" header in my get request. So I had to change my auth interceptor in order to not include Authorization header when sending a request to the S3 bucket.

Nelio Alves
  • 1,231
  • 13
  • 34