diff --git a/ui-ngx/src/app/shared/pipe/image.pipe.ts b/ui-ngx/src/app/shared/pipe/image.pipe.ts index 43acf04c77..2559343f56 100644 --- a/ui-ngx/src/app/shared/pipe/image.pipe.ts +++ b/ui-ngx/src/app/shared/pipe/image.pipe.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Pipe, PipeTransform } from '@angular/core'; +import { NgZone, Pipe, PipeTransform } from '@angular/core'; import { ImageService } from '@core/http/image.service'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { AsyncSubject, BehaviorSubject, Observable } from 'rxjs'; @@ -35,7 +35,8 @@ export interface UrlHolder { export class ImagePipe implements PipeTransform { constructor(private imageService: ImageService, - private sanitizer: DomSanitizer) { } + private sanitizer: DomSanitizer, + private zone: NgZone) { } transform(urlData: string | UrlHolder, args?: any): Observable { const ignoreLoadingImage = !!args?.ignoreLoadingImage; @@ -49,14 +50,18 @@ export class ImagePipe implements PipeTransform { const preview = !!args?.preview; this.imageService.resolveImageUrl(url, preview, asString, emptyUrl).subscribe((imageUrl) => { Promise.resolve().then(() => { - image$.next(imageUrl); - image$.complete(); + this.zone.run(() => { + image$.next(imageUrl); + image$.complete(); + }); }); }); } else { Promise.resolve().then(() => { - image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl)); - image$.complete(); + this.zone.run(() => { + image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl)); + image$.complete(); + }); }); } return image$.asObservable();