Prevent repeated requests for failed entity logos

libs/ui/src/lib/entity-logo/entity-logo-image-source.service.ts

@@ -7,6 +7,8 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class EntityLogoImageSourceService {
+  private failedImageSources = new Set<string>();
+
   public getLogoUrlByAssetProfileIdentifier({
     dataSource,
     symbol
@@ -17,4 +19,12 @@ export class EntityLogoImageSourceService {
   public getLogoUrlByUrl(url: string) {
     return `../api/v1/logo?url=${url}`;
   }
+
+  public hasFailed(imageSource: string) {
+    return this.failedImageSources.has(imageSource);
+  }
+
+  public markAsFailed(imageSource: string) {
+    this.failedImageSources.add(imageSource);
+  }
 }

libs/ui/src/lib/entity-logo/entity-logo.component.html

@@ -1,8 +1,8 @@
 @if (src) {
   <img
-    onerror="this.style.display = 'none'"
     [class.large]="size === 'large'"
     [src]="src"
     [title]="tooltip ? tooltip : ''"
+    (error)="onLogoError()"
   />
 }

libs/ui/src/lib/entity-logo/entity-logo.component.ts

@@ -23,7 +23,7 @@ export class GfEntityLogoComponent implements OnChanges {
   @Input() tooltip: string;
   @Input() url: string;
 
-  public src: string;
+  public src: string | undefined;
 
   public constructor(
     private readonly imageSourceService: EntityLogoImageSourceService
@@ -31,12 +31,28 @@ export class GfEntityLogoComponent implements OnChanges {
 
   public ngOnChanges() {
     if (this.dataSource && this.symbol) {
-      this.src = this.imageSourceService.getLogoUrlByAssetProfileIdentifier({
-        dataSource: this.dataSource,
-        symbol: this.symbol
-      });
+      const candidateSrc =
+        this.imageSourceService.getLogoUrlByAssetProfileIdentifier({
+          dataSource: this.dataSource,
+          symbol: this.symbol
+        });
+
+      this.src = this.imageSourceService.hasFailed(candidateSrc)
+        ? undefined
+        : candidateSrc;
     } else if (this.url) {
-      this.src = this.imageSourceService.getLogoUrlByUrl(this.url);
+      const candidateSrc = this.imageSourceService.getLogoUrlByUrl(this.url);
+
+      this.src = this.imageSourceService.hasFailed(candidateSrc)
+        ? undefined
+        : candidateSrc;
+    }
+  }
+
+  public onLogoError() {
+    if (this.src) {
+      this.imageSourceService.markAsFailed(this.src);
+      this.src = undefined;
     }
   }
 }