diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts index 8b4dc203e8..0e085e5c5c 100644 --- a/components/image/image-preview.component.ts +++ b/components/image/image-preview.component.ts @@ -16,6 +16,7 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -75,7 +76,7 @@ const initialPosition = { class="ant-image-preview-img" #imgRef *ngIf="index === imageIndex" - [attr.src]="image.src" + [attr.src]="sanitizerResourceUrl(image.src)" [attr.srcset]="image.srcset" [attr.alt]="image.alt" [style.width]="image.width" @@ -197,7 +198,8 @@ export class NzImagePreviewComponent implements OnInit { public nzConfigService: NzConfigService, public config: NzImagePreviewOptions, private overlayRef: OverlayRef, - private destroy$: NzDestroyService + private destroy$: NzDestroyService, + private sanitizer: DomSanitizer ) { this.zoom = this.config.nzZoom ?? 1; this.rotate = this.config.nzRotate ?? 0; @@ -347,6 +349,10 @@ export class NzImagePreviewComponent implements OnInit { } } + sanitizerResourceUrl(url: string): SafeResourceUrl { + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } + private updatePreviewImageTransform(): void { this.previewImageTransform = `scale3d(${this.zoom}, ${this.zoom}, 1) rotate(${this.rotate}deg)`; }