fix: create image using document method to avoid ReferenceError in SSR

NG-ZORRO · Apr 12, 2021 · 107f0d3 · 107f0d3
1 parent bc0e468
commit 107f0d3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/components/graph/core/minimap.ts b/components/graph/core/minimap.ts
@@ -186,7 +186,7 @@ export class Minimap {
 
     zoomGSelection.attr('transform', zoomTransform);
 
-    const image = new Image();
+    const image = document.createElement('img');
     image.onload = () => {
       // Draw the svg content onto the buffer canvas.
       const context = this.canvasBuffer.getContext('2d');

diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts
@@ -3,9 +3,21 @@
  * found in the LICENSE file at /~https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { ChangeDetectorRef, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Optional,
+  SimpleChanges
+} from '@angular/core';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { BooleanInput } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -44,6 +56,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy {
   }
 
   constructor(
+    @Inject(DOCUMENT) private document: NzSafeAny,
     public nzConfigService: NzConfigService,
     private elementRef: ElementRef,
     private nzImageService: NzImageService,
@@ -107,7 +120,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy {
    * @private
    */
   private backLoad(): void {
-    this.backLoadImage = new Image();
+    this.backLoadImage = this.document.createElement('img');
     this.backLoadImage.src = this.nzSrc;
     this.status = 'loading';
 

diff --git a/components/upload/upload-list.component.ts b/components/upload/upload-list.component.ts
@@ -126,7 +126,7 @@ export class NzUploadListComponent implements OnChanges {
 
   private previewImage(file: File | Blob): Promise<string> {
     return new Promise(resolve => {
-      if (!isImageFileType(file.type)) {
+      if (!isImageFileType(file.type) || !this.platform.isBrowser) {
         resolve('');
         return;
       }

diff --git a/components/upload/upload.spec.ts b/components/upload/upload.spec.ts
@@ -947,7 +947,7 @@ describe('upload', () => {
         spyOn(window as any, 'Image').and.returnValue(new MockImage());
 
         instance.listType = 'picture';
-        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thgitumbUrl: undefined }];
+        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thumbUrl: undefined }];
         fixture.detectChanges();
         tick();
         expect(instance.items[0].thumbUrl.length).toBeGreaterThan(1);
@@ -959,12 +959,12 @@ describe('upload', () => {
         spyOn(window as any, 'Image').and.returnValue(img);
 
         instance.listType = 'picture';
-        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thgitumbUrl: undefined }];
+        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thumbUrl: undefined }];
         fixture.detectChanges();
         tick();
         expect(instance.items[0].thumbUrl.length).toBeGreaterThan(1);
       }));
-      it('should be ingore thumb when is invalid image data', () => {
+      it('should be ignore thumb when is invalid image data', () => {
         instance.listType = 'picture';
         instance.items = [{ originFileObj: new File([''], '1.pdf', { type: 'pdf' }), thumbUrl: undefined }];
         fixture.detectChanges();
@@ -973,7 +973,7 @@ describe('upload', () => {
       it('should be customize preview file', fakeAsync(() => {
         instance.previewFile = () => of('11');
         instance.listType = 'picture';
-        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thgitumbUrl: undefined }];
+        instance.items = [{ originFileObj: new File([''], '1.png', { type: 'image/' }), thumbUrl: undefined }];
         fixture.detectChanges();
         tick();
         expect(instance.items[0].thumbUrl).toBe('11');