fix(ImageLoader): fixed issue where fallback image was not being loaded

Author: edoparearyee

src/app/app.component.html

@@ -4,22 +4,22 @@ <h3>Top image</h3>
   [sizes]="sizes"
   imgClass="img img--top"
   alt="lorem ipsum"
-  class="sn-image-loader sn-image-loader--top"
-></sn-image-loader>
+  class="sn-image-loader sn-image-loader--top">
+</sn-image-loader>
 
 <h1>Scroll down for bottom image ↓</h1>
 <h3>Bottom placeholder loaded: <span class="placeholder-boolean">{{ placeholderLoaded }}</span></h3>
 <div class="spacer"></div>
 
 <h3>Bottom image</h3>
 <sn-image-loader
-[image]="image"
-[sizes]="sizes"
-imgClass="img img--bottom"
-alt="lorem ipsum"
-(placeholderLoaded)="onPlaceholderLoad($event)"
-(imageLoaded)="onImageLoad($event)"
-class="sn-image-loader sn-image-loader--bottom"
-></sn-image-loader>
+  [image]="image"
+  [sizes]="sizes"
+  imgClass="img img--bottom"
+  alt="lorem ipsum"
+  (placeholderLoaded)="onPlaceholderLoad($event)"
+  (imageLoaded)="onImageLoad($event)"
+  class="sn-image-loader sn-image-loader--bottom">
+</sn-image-loader>
 <h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
 <div class="spacer"></div>

src/app/app.component.ts

@@ -9,9 +9,9 @@ import { ImageLoadedEvent } from './image-loader/shared';
 })
 export class AppComponent {
   sizes: Breakpoint[] = [
-    { size: 'xs', width: 0},
-    { size: 'md', width: 768},
-    { size: 'lg', width: 992},
+    { size: 'xs', width: 0 },
+    { size: 'md', width: 768 },
+    { size: 'lg', width: 992 },
   ];
 
   image: ResponsiveImage = {

src/app/image-loader/image-loader.component.html

@@ -15,4 +15,5 @@
   [srcset]="preloadSrcset"
   [src]="preloadSrc"
   (load)="onImagePreload()"
+  (error)="onImagePreloadError()"
   alt="">

src/app/image-loader/image-loader.component.spec.ts

@@ -192,4 +192,10 @@ describe('ImageLoaderComponent', () => {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('should load fallback image', () => {
+    component.src = '';
+    component.onImagePreloadError();
+    expect(component.src).toEqual(image.fallback);
+  });
+
 });

src/app/image-loader/image-loader.component.ts

@@ -295,6 +295,16 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.preloadSrc = '';
     this.loaded = true;
   }
+  /**
+   *
+   * @memberof ImageLoaderComponent
+   */
+  public onImagePreloadError(): void {
+    this.srcset = '';
+    this.src = this.image.fallback;
+    this.preloadSrc = '';
+    this.loaded = true;
+  }
   /**
    * When the main `img` element has loaded
    *