From 47feced1cb36603dd2770896953843f4f8c71685 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Tue, 31 May 2022 09:14:52 +0200
Subject: [PATCH] fix(console): header image fallback (#3735)

fix: fallback icon in header

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
---
 console/src/app/modules/header/header.component.html | 8 ++++----
 console/src/app/modules/header/header.component.ts   | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/console/src/app/modules/header/header.component.html b/console/src/app/modules/header/header.component.html
index 94b5659516..2a1177aee9 100644
--- a/console/src/app/modules/header/header.component.html
+++ b/console/src/app/modules/header/header.component.html
@@ -10,20 +10,20 @@
         alt="home logo"
         *ngIf="isDarkTheme; else customlighttheme"
         [src]="labelpolicy?.iconUrlDark ? labelpolicy.iconUrlDark : './assets/images/zitadel-logo-solo-light.svg'"
-        onerror="this.src='./assets/images/zitadel-logo-solo-light.svg';this.onerror='';"
+        (error)="errorHandler($event, './assets/images/zitadel-logo-solo-light.svg')"
       />
       <ng-template #customlighttheme>
         <img
           alt="home logo"
           class="logo"
           [src]="labelpolicy?.iconUrl ? labelpolicy.iconUrl : './assets/images/zitadel-logo-solo-dark.svg'"
-          onerror="this.src='./assets/images/zitadel-logo-solo-dark.svg';this.onerror='';"
+          (error)="errorHandler($event, './assets/images/zitadel-logo-solo-dark.svg')"
         />
       </ng-template>
     </a>
 
     <ng-template #defaultHome>
-      <a *ngIf="org" class="title" [routerLink]="['/']">
+      <a class="title" [routerLink]="['/']">
         <img
           class="logo"
           alt="zitadel logo"
@@ -31,7 +31,7 @@
           src="./assets/images/zitadel-logo-solo-light.svg"
         />
         <ng-template #lighttheme>
-          <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
+          <img alt="zitadel logo" class="logo" src="./assets/images/zitadel-logo-solo-dark.svg" />
         </ng-template>
       </a>
     </ng-template>
diff --git a/console/src/app/modules/header/header.component.ts b/console/src/app/modules/header/header.component.ts
index a5e5298935..3f7fc48f69 100644
--- a/console/src/app/modules/header/header.component.ts
+++ b/console/src/app/modules/header/header.component.ts
@@ -67,6 +67,10 @@ export class HeaderComponent implements OnDestroy {
     return this.router.url === '/users/me';
   }
 
+  public errorHandler(event: any, fallbackSrc: string) {
+    (event.target as HTMLImageElement).src = fallbackSrc;
+  }
+
   public get isOnInstance(): boolean {
     const pages: string[] = [
       '/instance',