adding image placeholders.

fix #353
fastenhealth · Dec 13, 2023 · 5d966d8 · 5d966d8
1 parent 7c6b180
commit 5d966d8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 4 deletions.
diff --git a/frontend/src/app/components/medical-sources-card/medical-sources-card.component.html b/frontend/src/app/components/medical-sources-card/medical-sources-card.component.html
@@ -2,7 +2,7 @@
   <div (click)="onCardClick()" class="card-body" [class.border-left-danger]="status == 'failed'">
 
     <div class="h-100 d-flex align-items-center">
-      <img [src]="'assets/sources/'+(sourceInfo?.metadata.brand_logo ? sourceInfo?.metadata?.brand_logo : sourceInfo?.metadata?.source_type+'.png')" [alt]="sourceInfo?.metadata?.display" class="img-fluid">
+      <img imageFallback [src]="'assets/sources/'+(sourceInfo?.metadata.brand_logo ? sourceInfo?.metadata?.brand_logo : sourceInfo?.metadata?.source_type+'.png')" [alt]="sourceInfo?.metadata?.display" class="img-fluid">
       <div *ngIf="status == 'failed'"  class="card-img-overlay">
         <span class="badge badge-danger">failed</span>
       </div>

diff --git a/frontend/src/app/directives/directives.module.ts b/frontend/src/app/directives/directives.module.ts
@@ -3,16 +3,19 @@ import { NgModule } from '@angular/core';
 
 // Directives
 import {ExternalLinkDirective} from './external-link.directive';
+import { ImageFallbackDirective } from './image-fallback.directive';
 
 @NgModule({
   declarations: [
     ExternalLinkDirective,
+    ImageFallbackDirective,
   ],
   imports: [
 
   ],
-  exports: [
-    ExternalLinkDirective,
-  ]
+    exports: [
+        ExternalLinkDirective,
+        ImageFallbackDirective,
+    ]
 })
 export class DirectivesModule {}
diff --git a/frontend/src/app/directives/image-fallback.directive.spec.ts b/frontend/src/app/directives/image-fallback.directive.spec.ts
@@ -0,0 +1,8 @@
+import { ImageFallbackDirective } from './image-fallback.directive';
+
+describe('ImageFallbackDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ImageFallbackDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/directives/image-fallback.directive.ts b/frontend/src/app/directives/image-fallback.directive.ts
@@ -0,0 +1,16 @@
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+
+@Directive({
+  selector: 'img[imageFallback]'
+})
+export class ImageFallbackDirective {
+
+  @Input() imageFallback?: string;
+  constructor(private elementRef: ElementRef) {}
+
+  @HostListener('error')
+  loadFallbackOnError() {
+    this.elementRef.nativeElement.src = this.imageFallback || 'assets/images/no-image.svg';
+  }
+
+}
diff --git a/frontend/src/assets/banner/banner-trimmed.png b/frontend/src/assets/banner/banner-trimmed.png
diff --git a/frontend/src/assets/images/no-image.svg b/frontend/src/assets/images/no-image.svg