Add a directive uiImageLoader, fixed github avatar problem.

Author: gnu4cn

electron/src/book.backend.ts

@@ -65,7 +65,7 @@ export class BookBackend {
         });
 
         const webContents = bookWindow.webContents;
-        //webContents.openDevTools();
+        webContents.openDevTools();
 
         bookWindow.loadURL(this.bookUrl);
 

src/app/book/book.module.ts

@@ -40,6 +40,7 @@ import { ContentSearchDirective } from './directives/content-search.directive';
 
 import { environment } from '../../environments/environment';
 import { config } from '../gbr.config';
+import { UiImageLoaderDirective } from './directives/ui-image-loader.directive';
 
 @NgModule({
     imports: [
@@ -59,6 +60,7 @@ import { config } from '../gbr.config';
         ElementInputDirective,
         ContentSearchDirective,
         SafeHtmlPipe,
+        UiImageLoaderDirective,
     ],
     providers: [
         SettingsService,
@@ -86,6 +88,7 @@ import { config } from '../gbr.config';
         ElementInputDirective,
         SafeHtmlPipe,
         ContentSearchDirective,
+        UiImageLoaderDirective,
     ]
 })
 export class BookPageModule {

src/app/book/directives/ui-image-loader.directive.ts

@@ -0,0 +1,26 @@
+import {
+    Directive,
+    Attribute,
+    Renderer2,
+    ElementRef,
+    HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[uiImageLoader]'
+})
+export class UiImageLoaderDirective {
+    constructor(
+        @Attribute('loader') public loader: string,
+        @Attribute('onErrorSrc') public onErrorSrc: string,
+        private renderer: Renderer2,
+        private el: ElementRef) {
+        this.renderer.setAttribute(this.el.nativeElement, 'src', this.loader);
+    }
+
+    @HostListener('load') onLoad() {
+        this.renderer.setAttribute(this.el.nativeElement, 'src', this.el.nativeElement.src);
+    }
+    @HostListener('error') onError() {
+        this.renderer.setAttribute(this.el.nativeElement, 'src', this.onErrorSrc);
+    }
+}

src/app/home/components/book-list.component.html

@@ -12,7 +12,12 @@
 
                 <!-- 作者和来源 -->
                 <mat-card-header>
-                    <img mat-card-avatar [src]="book.isFromMainstreamPlatform ? book.writer.avatarUrl : 'assets/images/avatar.png'" />
+                    <img mat-card-avatar 
+                           uiImageLoader
+                           onErrorSrc="assets/images/avatar.png"
+                           loader="assets/images/loader.gif"
+                           [src]="book.isFromMainstreamPlatform ? book.writer.avatarUrl : 'assets/images/avatar.png'" 
+                           />
                     <mat-card-title>{{book.writer.fullName}}</mat-card-title>
                     <mat-card-subtitle>
                         <ion-icon *ngIf="book.writer.location.length > 0" name="location-outline"></ion-icon>{{book.writer.location}}