MOBILE-3973 course: Load fallback icon when image cannot be loaded

src/core/features/course/pages/course-summary/course-summary.html

@@ -18,7 +18,7 @@
     </ion-refresher>
     <core-loading [hideUntil]="dataLoaded">
         <div *ngIf="course" class="core-course-thumb" #courseThumb>
-            <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" />
+            <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
             <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
             </ion-icon>
         </div>

src/core/features/course/pages/course-summary/course-summary.page.ts

@@ -466,6 +466,20 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy {
         CoreNavigator.navigateToSitePath(item.data.page, { params });
     }
 
+    /**
+     * Removes the course image set because it cannot be loaded and set the fallback icon color.
+     */
+    loadFallbackCourseIcon(): void {
+        if (!this.course) {
+            return;
+        }
+
+        this.course.courseimage = undefined;
+
+        // Set the color because it won't be set at this point.
+        this.setCourseColor();
+    }
+
     /**
      * Set course color.
      */

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -3,7 +3,7 @@
     button [attr.aria-label]="course.displayname || course.fullname">
 
     <div *ngIf="layout == 'card' || layout == 'summarycard'" class="core-course-thumb" [class.core-course-color-img]="course.courseimage">
-        <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" />
+        <img *ngIf="course.courseimage" [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
         <ion-icon *ngIf="!course.courseimage" name="fas-graduation-cap" class="course-icon" aria-hidden="true">
         </ion-icon>
     </div>
@@ -34,7 +34,7 @@
                 aria-hidden="true">
             </ion-icon>
             <ion-avatar *ngIf="course.courseimage" slot="start" class="core-course-thumb">
-                <img [src]="course.courseimage" core-external-content alt="" />
+                <img [src]="course.courseimage" core-external-content alt="" (error)="loadFallbackCourseIcon()" />
             </ion-avatar>
         </ng-container>
 

src/core/features/courses/components/course-list-item/course-list-item.ts

@@ -128,6 +128,16 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
         }
     }
 
+    /**
+     * Removes the course image set because it cannot be loaded and set the fallback icon color.
+     */
+    loadFallbackCourseIcon(): void {
+        this.course.courseimage = undefined;
+
+        // Set the color because it won't be set at this point.
+        this.setCourseColor();
+    }
+
     /**
      * Set course color.
      */