edit

src/app/shared/components/imagelist/image-list.module.ts

@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ImageListComponent } from './imagelist.component';
 import { ImageViewComponent } from './imageview/imageview.component';
+import { NzImageModule } from 'ng-zorro-antd/image';
 
 const COMPONENTS = [ImageListComponent, ImageViewComponent];
 
 @NgModule({
   declarations: COMPONENTS,
-  imports: [CommonModule],
-  exports: COMPONENTS,
+  imports: [CommonModule, NzImageModule],
+  exports: COMPONENTS
 })
 export class ImageListModule {}

src/app/shared/components/imagelist/imagelist.component.html

@@ -1,3 +1,3 @@
 <div class="imgBox">
-  <img *ngFor="let item of imgList; let i = index" [src]="item" (click)="showImg(i)" />
-</div>
+  <img *ngFor="let item of imgList; let i = index" nz-image [nzSrc]="item" />
+</div>

src/app/shared/components/imagelist/imagelist.component.ts

@@ -8,25 +8,32 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzImageService } from 'ng-zorro-antd/image';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { ImageViewComponent } from './imageview/imageview.component';
 
 @Component({
   selector: 'app-imagelist',
   templateUrl: './imagelist.component.html',
-  styleUrls: ['./imagelist.less'],
+  styleUrls: ['./imagelist.less']
 })
 export class ImageListComponent implements OnInit {
   @Input() imgList: any = [];
-  constructor(private modal: ModalHelper, public msgSrv: NzMessageService, public http: _HttpClient) {}
+  constructor(
+    private modal: ModalHelper,
+    public msgSrv: NzMessageService,
+    public http: _HttpClient,
+    private nzImageService: NzImageService
+  ) {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
   showImg(index: any) {
     const params = {
       imgList: this.imgList,
-      index,
+      index
     };
-    this.modal.create(ImageViewComponent, { params }).subscribe((res) => {});
+    const images = this.imgList.map((url: string) => ({ src: url }));
+    this.nzImageService.preview(images);
+    // this.modal.create(ImageViewComponent, { params }).subscribe(res => {});
   }
 }

src/app/shared/shared-zorro.module.ts

@@ -44,8 +44,9 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 import { NzAffixModule } from 'ng-zorro-antd/affix';
-import { NzTypographyModule  } from 'ng-zorro-antd/typography';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzImageModule } from 'ng-zorro-antd/image';
 export const SHARED_ZORRO_MODULES = [
   NzButtonModule,
   NzGridModule,
@@ -85,5 +86,6 @@ export const SHARED_ZORRO_MODULES = [
   NzAnchorModule,
   NzAffixModule,
   NzTypographyModule,
-  NzSwitchModule 
+  NzSwitchModule,
+  NzImageModule
 ];