Skip to content
Permalink
Browse files

feat(module:avatar): support image load error event (#3893)

close #3223
  • Loading branch information...
hsuanxyz authored and wendzhue committed Aug 9, 2019
1 parent 41bc285 commit ab4bcbe6f8a703a51f406db6efe3dbe6a27bd8aa
@@ -1,6 +1,7 @@
import { Component, DebugElement, ViewChild } from '@angular/core';
import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { createFakeEvent } from 'ng-zorro-antd/core';

import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';

@@ -38,11 +39,12 @@ describe('avatar', () => {
expect(context).not.toBeNull();
});
it('should tolerate error src', fakeAsync(() => {
const event = createFakeEvent('error');
expect(getType(dl)).toBe('image');
expect(context.comp.hasSrc).toBe(true);
// Manually dispatch error.
context.nzSrc = '';
context.comp.imgError();
context.comp.imgError(event);
tick();
fixture.detectChanges();
expect(getType(dl)).toBe('icon');
@@ -55,6 +57,26 @@ describe('avatar', () => {
expect(getType(dl)).toBe('image');
tick();
}));
it('should prevent default fallback when error src', fakeAsync(() => {
const event = createFakeEvent('error');
event.preventDefault();
expect(getType(dl)).toBe('image');
expect(context.comp.hasSrc).toBe(true);
// Manually dispatch error.
context.nzSrc = 'Invalid image src';
context.comp.imgError(event);
tick();
fixture.detectChanges();
expect(getType(dl)).toBe('image');
expect(context.comp.hasSrc).toBe(true);
context.nzSrc =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';
tick();
fixture.detectChanges();
expect(context.comp.hasSrc).toBe(true);
expect(getType(dl)).toBe('image');
tick();
}));
it('#nzSrcSet', () => {
context.nzSrcSet = '1.png';
fixture.detectChanges();
@@ -164,27 +186,30 @@ describe('avatar', () => {
expect(getType(dl)).toBe('image');
});
it('should be show icon when image loaded error and icon exists', fakeAsync(() => {
const event = createFakeEvent('error');
expect(getType(dl)).toBe('image');
context.comp.imgError();
context.comp.imgError(event);
tick();
fixture.detectChanges();
expect(getType(dl)).toBe('icon');
}));
it('should be show text when image loaded error and icon not exists', fakeAsync(() => {
const event = createFakeEvent('error');
expect(getType(dl)).toBe('image');
context.nzIcon = null;
fixture.detectChanges();
context.comp.imgError();
context.comp.imgError(event);
tick();
fixture.detectChanges();
expect(getType(dl)).toBe('text');
}));
it('should be show empty when image loaded error and icon & text not exists', fakeAsync(() => {
const event = createFakeEvent('error');
expect(getType(dl)).toBe('image');
context.nzIcon = null;
context.nzText = null;
fixture.detectChanges();
context.comp.imgError();
context.comp.imgError(event);
tick();
fixture.detectChanges();
expect(getType(dl)).toBe('');
@@ -27,3 +27,4 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
| `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - |
| `[nzAlt]` | This attribute defines the alternative text describing the image | string | - |
| `[nzText]` | letter type avatar | `string` | - |
| `(nzError)` | handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter<Event>` | - |
@@ -28,3 +28,4 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar';
| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
| `[nzAlt]` | 图像无法显示时的替代文本 | string | - |
| `[nzText]` | 文本类头像 | `string` | - |
| `(nzError)` | 图片加载失败的事件,调用 `preventDefault` 方法会阻止组件默认的 fallback 行为 | `EventEmitter<Event>` | - |
@@ -1,3 +1,3 @@
<i nz-icon *ngIf="nzIcon && hasIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
<img *ngIf="nzSrc && hasSrc" [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError()"/>
<img *ngIf="nzSrc && hasSrc" [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)"/>
<span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
@@ -12,8 +12,10 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
Output,
Renderer2,
SimpleChanges,
ViewChild,
@@ -46,6 +48,7 @@ export class NzAvatarComponent implements OnChanges {
@Input() nzSrcSet: string;
@Input() nzAlt: string;
@Input() nzIcon: string;
@Output() readonly nzError = new EventEmitter<Event>();

oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
hasText: boolean = false;
@@ -80,17 +83,20 @@ export class NzAvatarComponent implements OnChanges {
return this;
}

imgError(): void {
this.hasSrc = false;
this.hasIcon = false;
this.hasText = false;
if (this.nzIcon) {
this.hasIcon = true;
} else if (this.nzText) {
this.hasText = true;
imgError($event: Event): void {
this.nzError.emit($event);
if (!$event.defaultPrevented) {
this.hasSrc = false;
this.hasIcon = false;
this.hasText = false;
if (this.nzIcon) {
this.hasIcon = true;
} else if (this.nzText) {
this.hasText = true;
}
this.setClass().notifyCalc();
this.setSizeStyle();
}
this.setClass().notifyCalc();
this.setSizeStyle();
}

ngOnChanges(changes: SimpleChanges): void {

0 comments on commit ab4bcbe

Please sign in to comment.
You can’t perform that action at this time.