img tag not loading dynamic image url in different browser except chrome

Question

I am trying to load images dynamically in my application.

<ion-card class="card-transition">
  <div class="card-block">
    <img #imageRef [src]="sanitizedUrl ? sanitizedUrl : defaultImagePath"
      (error)="handleImageError(imageRef, defaultImagePath)" alt="alt-image"
      class="card-contain-img" decoding="async" loading="lazy">
    <ion-radio *ngIf="showRadioButton" slot="start" [value]="item"></ion-radio>
  </div>
</ion-card>

this.sanitizedUrl = this.sanitizer.sanitize(SecurityContext.STYLE, this.item.Url);

the code is working fine with chrome browser, but when I use safari/edge browser it's not working.

I have done some research and found a link which says safari does not support .webp format but did not find any proper solution yet.

https://dnaofsafetydev.sharepoint.com/sites/BluePrint/Shared%20Documents/Machine_Library/Machines/TTR-ERER33434_0201026433000096/Pictures/industrymachines.jpeg

This is the image url and it's loading properly on chrome. Is it because of I am trying to fetch image from sharepoint site?

Is there anything I need to add in css or the img tag which will help to resolve this image loading issue with different browsers?