fix(): use fallback image if image fails to load (#6)

Author: guillenotfound

src/components/img-loader/img-loader.ts

@@ -118,7 +118,8 @@ export class ImgLoader implements OnInit {
     }
 
     this.imageLoader.getImagePath(this.imageUrl)
-      .then((imageUrl: string) => this.setImage(imageUrl));
+      .then((imageUrl: string) => this.setImage(imageUrl))
+      .catch((error: any) => this.setImage(this.fallbackUrl || this.imageUrl));
   }
 
   private setImage(imageUrl: string): void {
@@ -159,7 +160,7 @@ export class ImgLoader implements OnInit {
         this.renderer.setElementStyle(element, 'background-repeat', this.backgroundRepeat);
       }
 
-      this.renderer.setElementStyle(element, 'background-image', 'url(\'' + imageUrl +'\')');
+      this.renderer.setElementStyle(element, 'background-image', 'url(\'' + imageUrl + '\')');
     }
   }
 

src/providers/image-loader.ts

@@ -52,7 +52,7 @@ export class ImageLoader {
    * @returns {Promise<string>} Returns a promise that will always resolve with an image URL
    */
   getImagePath(imageUrl: string): Promise<string> {
-    return new Promise<string>((resolve) => {
+    return new Promise<string>((resolve, reject) => {
 
       let getImage = () => {
         this.getCachedImagePath(imageUrl)
@@ -67,7 +67,7 @@ export class ImageLoader {
                 resolve(localPath);
               })
               .catch((e) => {
-                resolve(imageUrl);
+                reject();
                 this.throwError(e);
               });
           });