feat(module:image-view): add image-view

components/core/config/config.ts

@@ -51,6 +51,7 @@ export interface NzConfig {
   image?: ImageConfig;
   popconfirm?: PopConfirmConfig;
   popover?: PopoverConfig;
+  imageView?: ImageViewConfig;
 }
 
 export interface SelectConfig {
@@ -305,6 +306,18 @@ export interface ImageConfig {
   nzDirection?: Direction;
 }
 
+export interface ImageViewConfig {
+  nzFallback?: string;
+  nzPlaceholder?: string;
+  nzDisablePreview?: string;
+  nzCloseOnNavigation?: boolean;
+  nzDirection?: Direction;
+  nzPreload?: boolean;
+  nzOptimize?: boolean;
+  nzOptimizeSizes?: number[];
+  nzLoader?(params: { src: string; width: number }): string;
+}
+
 export interface PopConfirmConfig {
   nzPopconfirmBackdrop?: boolean;
 }

components/image-view/demo/fallback.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 容错处理
+  en-US: Fault tolerant
+---
+
+## zh-CN
+
+加载失败显示图像占位符。
+
+## en-US
+
+Load failed to display image placeholder.

components/image-view/demo/fallback.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-image-view-fallback',
+  template: `
+    <nz-image-view nzWidth="200px" nzHeight="200px" nzSrc="error" [nzFallback]="fallback" nzAlt=""></nz-image-view>
+  `
+})
+export class NzDemoImageViewFallbackComponent {
+  fallback =
+    'data:image/png;base64,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';
+}

components/image-view/demo/module

@@ -0,0 +1,5 @@
+import { NzImageViewModule } from 'ng-zorro-antd/image-view';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
+export const moduleList = [ NzImageViewModule, NzButtonModule, NzSpaceModule ];

components/image-view/demo/optimization.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 优化
+  en-US: Optimization
+---
+
+## zh-CN
+
+添加 `nzOptimize` 属性优化高分辨率屏幕图片加载，宽高使用固定尺寸可以帮助网页提高 [CLS](https://web.dev/cls/) 性能指标，你可以在不同像素密度的设备上打开此网页观察图像请求变化。
+
+## en-US
+
+Adding the `nzOptimize` property optimizes the loading of images for high-resolution screens, and using a fixed size for the width and height can help the page improve [CLS](https://web.dev/cls/) performance metrics, and you can open this page on devices with different pixel densities to observe image request changes.

components/image-view/demo/optimization.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NzImageViewLoader } from 'ng-zorro-antd/image-view';
+
+export const loader: NzImageViewLoader = ({ src, width }) => {
+  return `http://image-demo.oss-cn-hangzhou.aliyuncs.com/${encodeURIComponent(src)}?x-oss-process=image/resize,w_${width}`;
+};
+
+@Component({
+  selector: 'nz-demo-image-view-optimization',
+  template: `
+    <nz-image-view [nzSrc]="src" nzWidth="200" nzHeight="140" [nzLoader]="loader" nzOptimize></nz-image-view>
+  `
+})
+export class NzDemoImageViewOptimizationComponent {
+  src = 'example.jpg';
+  loader = loader;
+}

components/image-view/demo/placeholder.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 渐进加载
+  en-US: Progressive Loading
+---
+
+## zh-CN
+
+大图使用 placeholder 渐进加载。
+
+## en-US
+
+Progressive when large image loading.

components/image-view/demo/placeholder.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-image-view-placeholder',
+  template: `
+    <nz-space [nzSize]="12">
+      <nz-image-view *nzSpaceItem nzWidth="200px" nzHeight="200px" [nzSrc]="src" [nzPlaceholder]="placeholder"></nz-image-view>
+      <button *nzSpaceItem nz-button nzType="primary" (click)="onReload()">Reload</button>
+    </nz-space>
+  `
+})
+export class NzDemoImageViewPlaceholderComponent {
+  src = `https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png`;
+  placeholder =
+    'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200';
+
+  onReload(): void {
+    this.src = `https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${new Date()}`;
+  }
+}

components/image-view/demo/preloading.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 预先加载
+  en-US: Preloading
+---
+
+## zh-CN
+
+添加 `nzPreload` 可以在服务端渲染下添加 [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)，使用预加载可以帮助网页提高 [LCP](https://web.dev/cls/) 性能指标。
+
+## en-US
+
+Adding `nzPreload` can add [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) under server-side rendering, using preload can help web pages improve [LCP]( https://web.dev/cls/) performance metrics.

components/image-view/demo/preloading.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-image-view-preloading',
+  template: `
+    <nz-image-view [nzSrc]="src" nzWidth="200" nzHeight="200" nzPreload></nz-image-view>
+  `
+})
+export class NzDemoImageViewPreloadingComponent {
+  src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+}

components/image-view/demo/preview-group.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 多张图片预览
+  en-US: Multiple image preview
+---
+
+## zh-CN
+
+点击左右切换按钮可以预览多张图片。
+
+## en-US
+
+Click the left and right switch buttons to preview multiple images.

components/image-view/demo/preview-group.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-image-view-preview-group',
+  template: `
+    <nz-image-view-group>
+      <nz-image-view nzWidth="200px" nzSrc="https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg"></nz-image-view>
+      <nz-image-view nzWidth="200px" nzSrc="https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg"></nz-image-view>
+    </nz-image-view-group>
+  `
+})
+export class NzDemoImageViewPreviewGroupComponent {}

components/image-view/demo/previewable.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 预览图片
+  en-US: Preview
+---
+
+## zh-CN
+
+单击图像可以放大显示。
+
+## en-US
+
+Click the image to preview.

components/image-view/demo/previewable.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-image-view-previewable',
+  template: `
+    <nz-image-view
+      nzWidth="200px"
+      nzHeight="200px"
+      nzSrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      nzAlt=""
+    ></nz-image-view>
+  `
+})
+export class NzDemoImageViewPreviewableComponent {}

components/image-view/demo/service.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 服务方式创建预览层
+  en-US: Image Preview Service
+---
+
+## zh-CN
+
+图片预览的 Service 用法，示例中包含使用 Service 创建单张或多张图片预览的用法
+
+## en-US
+
+The usage of `NzImageService` for images preview, the example includes the usage of using `NzImageService` to create single or multiple images preview

components/image-view/demo/service.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { NzImageViewService } from 'ng-zorro-antd/image-view';
+
+@Component({
+  selector: 'nz-demo-image-view-service',
+  template: `
+    <button nz-button nzType="primary" (click)="onClick()">Preview</button>
+  `
+})
+export class NzDemoImageViewServiceComponent {
+  constructor(private nzImageViewService: NzImageViewService) {}
+
+  onClick(): void {
+    const images = [
+      {
+        src: 'https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg',
+        width: '200px',
+        height: '200px',
+        alt: 'ng-zorro'
+      },
+      {
+        src: 'https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg',
+        width: '200px',
+        height: '200px',
+        alt: 'angular'
+      }
+    ];
+    this.nzImageViewService.preview(images, { nzZoom: 1.5, nzRotate: 0 });
+  }
+}

components/image-view/doc/index.en-US.md

@@ -0,0 +1,90 @@
+---
+category: Components
+type: Data Display
+title: Image View
+experimental: true
+---
+
+<blockquote style="border-color: #faad14;">
+<p>NG-ZORRO 实验性功能是指已发布但不稳定或者还未准备好用于生产环境的功能。</p>
+<p>开发者或用户可以选择在正式发布前使用这些功能，但是每次发布版本时都可能存在 <strong>breaking changes</strong>。</p>
+</blockquote>
+
+## When To Use
+
+- Use when you need to optimize image loading.
+- Use when you need to preload image (under server side).
+- Use when you need to preview image.
+- Fault-tolerance when loading large image incrementally or when loading fails.
+
+```ts
+import { NzImageViewModule } from 'ng-zorro-antd/image-view';
+```
+
+## API
+
+### nz-image-view
+
+| Property | Description | Type | Default | Global Config |
+| --- | --- | --- | --- | --- |
+|nzSrc | URL | `string` | - | |
+|nzAlt | Alt | `string` | - | |
+|nzWidth | Width | `number\|string` | `auto` | |
+|nzHeight | Height | `number\|string` | `auto` | |
+|nzLoader | Loader | `NzImageViewLoader` | `defaultLoader` | ✅ |
+|nzOptimize | Whether to optimize image loading | `boolean` | `false` | ✅ |
+|nzPreload | Whether to add [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) (only SSR)  | `boolean` | `false` | ✅ |
+|nzOptimizeSizes | Optimized loading size | `number[]` | `[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]` | ✅ |
+
+### NzImageViewService
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| images | Preview images | `NzImageView[]` | - |
+| options | Preview options | `NzImageViewPreviewOptions` | - |
+
+## Related type definition
+
+### NzImageView
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| src | src | `string` | - |
+| alt | alt | `string` | - |
+| width | width | `string` | - |
+| height | height | `string` | - |
+
+### NzImageViewPreviewOptions
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| nzKeyboard      | Whether support press `esc` to close | `boolean` | `true` |
+| nzMaskClosable      | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` |
+| nzCloseOnNavigation      | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` |
+| nzZIndex      | The z-index of the image preview | `number` | 1000 |
+| nzZoom      | Zoom rate | `number` | 1 |
+| nzRotate      | Rotate rate | `number` | 0 |
+
+### NzImageViewPreviewRef
+
+| Name | Description |
+| --- | --- |
+| switchTo(index: number): void | Switch to index |
+| prev(): void | Previous image |
+| next(): void | Next image |
+| close(): void | Close image preview |
+
+### NzImageViewLoader
+
+```ts
+export type NzImageViewLoader = (params: {src: string; width: number}) => string;
+
+export const defaultImageViewLoader: NzImageViewLoader = ({ src }) => {
+  return encodeURIComponent(src);
+};
+```
+
+### Responsive images and preloaded images
+Using responsive images can help web pages display well on different devices. Preloading images can help you load images faster, for more information please refer to.
+- [preloading responsive images](https://web.dev/preload-responsive-images/)
+- [next.js image component and image optimization](https://nextjs.org/docs/basic-features/image-optimization)