Show default image

src/app/collection-page/collection-page.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
 import { TranslateModule } from "@ngx-translate/core";
 
+import { SharedModule } from '../shared/shared.module';
+
 import { CollectionPageComponent } from './collection-page.component';
 import { FieldWrapperComponent } from './field-wrapper/field-wrapper.component';
 import { CollectionPageNameComponent } from './name/collection-page-name.component';
@@ -17,6 +18,7 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
   imports: [
     CollectionPageRoutingModule,
     CommonModule,
+    SharedModule,
     TranslateModule,
   ],
   declarations: [

src/app/collection-page/logo/collection-page-logo.component.html

@@ -1,3 +1,3 @@
 <ds-field-wrapper *ngIf="logo" class="collection-page-logo">
-    <img [src]="logo.url" class="img-responsive" alt="Collection logo" />
+    <img [src]="logo.url" class="img-responsive" alt="Collection logo" (error)="errorHandler($event)"/>
-</ds-field-wrapper>
+</ds-field-wrapper>

src/app/collection-page/logo/collection-page-logo.component.ts

@@ -10,4 +10,16 @@ import { Bitstream } from "../../core/shared/bitstream.model";
 })
 export class CollectionPageLogoComponent {
   @Input() logo: Bitstream;
+
+  /**
+   * The default 'holder.js' image
+   */
+  holderSource: string = "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+  constructor() {
+  }
+
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
 }

src/app/thumbnail/thumbnail.component.html

@@ -1,4 +1,4 @@
 <div class="thumbnail">
-   <img *ngIf="thumbnail" [src]="thumbnail.retrieve"/>
+  <img *ngIf="thumbnail" [src]="thumbnail.retrieve" (error)="errorHandler($event)"/>
-   <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
-</div>
+</div>

src/app/thumbnail/thumbnail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Bitstream } from "../core/shared/bitstream.model";
 
 /**
@@ -14,21 +14,24 @@ import { Bitstream } from "../core/shared/bitstream.model";
 })
 export class ThumbnailComponent {
 
-    @Input() thumbnail: Bitstream;
+  @Input() thumbnail: Bitstream;
 
-    data: any = {};
+  public source: string;
 
-    /**
+  /**
-     * The default 'holder.js' image
+   * The default 'holder.js' image
-     */
+   */
-    holderSource: string = "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+  holderSource: string = "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
 
-    constructor() {
+  constructor() {
-        this.universalInit();
+    this.universalInit();
-    }
+  }
 
-    universalInit() {
+  universalInit() {
+  }
 
-    }
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
 
 }