79597: Add HTML placeholder for missing thumbnails

src/app/thumbnail/thumbnail.component.html

@@ -1,4 +1,11 @@
 <div class="thumbnail">
-  <img [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
+  <img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt" (error)="errorHandler()" class="img-fluid"/>
+  <div *ngIf="src === null" class="outer">
+    <div class="inner">
+      <div class="thumbnail-placeholder w-100 h-100 p-3">
+        {{ placeholder | translate }}
+      </div>
+    </div>
+  </div>
 </div>
 

src/app/thumbnail/thumbnail.component.scss

@@ -19,7 +19,7 @@ img {
 
     > .thumbnail-placeholder {
       background: var(--bs-gray-100);
-      border: var(--bs-gray-200) 1px;
+      border: 1px solid var(--bs-gray-200);
       color: var(--bs-gray-600);
       font-weight: bold;
       display: flex;

src/app/thumbnail/thumbnail.component.ts

@@ -2,11 +2,6 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { hasValue } from '../shared/empty.util';
 
-/**
- * A fallback placeholder image as a base64 string
- */
-export const THUMBNAIL_PLACEHOLDER = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
-
 /**
  * This component renders a given Bitstream as a thumbnail.
  * One input parameter of type Bitstream is expected.
@@ -24,9 +19,10 @@ export class ThumbnailComponent implements OnInit {
   @Input() thumbnail: Bitstream;
 
   /**
-   * The default image, used if the thumbnail isn't set or can't be downloaded
+   * The default image, used if the thumbnail isn't set or can't be downloaded.
+   * If defaultImage is null, a HTML placeholder is used instead.
    */
-  @Input() defaultImage? = THUMBNAIL_PLACEHOLDER;
+  @Input() defaultImage? = null;
 
   /**
    * The src attribute used in the template to render the image.
@@ -38,12 +34,19 @@ export class ThumbnailComponent implements OnInit {
    */
   @Input() alt? = 'thumbnail.default.alt';
 
+  /**
+   * i18n key of HTML placeholder text
+   */
+  @Input() placeholder? = 'thumbnail.default.placeholder';
+
   /**
    * Initialize the thumbnail.
    * Use a default image if no actual image is available.
    */
   ngOnInit(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) && hasValue(this.thumbnail._links.content) && this.thumbnail._links.content.href) {
+    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links)
+                                 && hasValue(this.thumbnail._links.content)
+                                 && this.thumbnail._links.content.href) {
       this.src = this.thumbnail._links.content.href;
     } else {
       this.src = this.defaultImage;
@@ -53,13 +56,13 @@ export class ThumbnailComponent implements OnInit {
   /**
    * Handle image download errors.
    * If the image can't be found, use the defaultImage instead.
-   * If that also can't be found, use the base64 placeholder.
+   * If that also can't be found, use null to fall back to the HTML placeholder.
    */
   errorHandler() {
     if (this.src !== this.defaultImage) {
       this.src = this.defaultImage;
     } else {
-      this.src = THUMBNAIL_PLACEHOLDER;
+      this.src = null;
     }
   }
 }

src/assets/i18n/en.json5

@@ -3539,10 +3539,24 @@
   "submission.workflow.tasks.pool.show-detail": "Show detail",
 
 
+
   "thumbnail.default.alt": "Thumbnail Image",
 
   "thumbnail.default.placeholder": "No Thumbnail Available",
 
+  "thumbnail.project.alt": "Project Logo",
+
+  "thumbnail.project.placeholder": "Project Placeholder Image",
+
+  "thumbnail.orgunit.alt": "OrgUnit Logo",
+
+  "thumbnail.orgunit.placeholder": "OrgUnit Placeholder Image",
+
+  "thumbnail.person.alt": "Profile Picture",
+
+  "thumbnail.person.placeholder": "No Profile Picture Available",
+
+
 
   "title": "DSpace",