Angular image-cropper returning cors error

Question

I have this image cropper using imageUrl

<image-cropper
  (imageCropped)="imageCropped($event)"
  [aspectRatio]="600 / 450"
  [imageChangedEvent]="imageChangedEvent"
  [imageFile]="imageFile"
  [imageURL]="imageUrl"
  [maintainAspectRatio]="true"
></image-cropper>

however, some images are giving me CORS error. I have all the necessary permissions, and when i adapt the code to use the regular image tag, like this

  <img [src]="imageUrl" style="width: 100%; height: 100%; object-fit: cover;">
</div>

it works fine, even the ones who were not working with image-cropper. How can i correct that?

Answer 1

The official documentation says that "If you don't want to use a file input or a base64 you can set an URL to get the image from. If requesting an image from a different domain make sure Cross-Origin Resource Sharing (CORS) is allowed or the image will fail to load." (https://www.npmjs.com/package/ngx-image-cropper

If you don't have control over the domains where the images are located (in order to allow cors), you need to download your images then pass them to your cropper.