I am developing an angular application in which I have integrated EntraID app for authentication and used the MsalInterceptor and configured the required providers as follows:

    providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ]

This configuration works (adding required bearer token) for making http requests from service classes and for downloading the file as follows:

    export class FileDownloadService {

  constructor(private http: HttpClient) { }

  downloadFile(url: string): Observable<Blob> {
    return this.http.get(url, { responseType: 'blob' });
  }
}


    this.fileDownloadService.downloadFile(fileUrl).subscribe(
            {
            next:blob => {
            const a = document.createElement('a');
            const objectUrl = URL.createObjectURL(blob);
            a.href = objectUrl;
            a.download = file.fileName;
            a.click();
            URL.revokeObjectURL(objectUrl);
            this.gridApi.deselectAll();
          },
          error: (error) => {
            
          }});

However, it is not working (not setting the bearer token to the header) when the filePath was set as src for the img, video, audio and pdf viewers as follows:

<img [src]="filePath" />

Am I missing any configuration?