From 9875cbdc7028a5a82221d0fbf3997d5e4b6e569e Mon Sep 17 00:00:00 2001
From: Sascha Hahne <ntbm@users.noreply.github.com>
Date: Tue, 26 Oct 2021 22:41:28 +0200
Subject: [PATCH] Set Fallback Image for broken Thumbnails (#50)

* Set Fallback Image for broken Thumbnails

* Transparent placeholder

* Added some comments
---
 public/notFound.svg             | 4 ++++
 src/components/SpinnerImage.tsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 public/notFound.svg

diff --git a/public/notFound.svg b/public/notFound.svg
new file mode 100644
index 00000000..f0c56968
--- /dev/null
+++ b/public/notFound.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Transparent placeholder as fallback for unsuccessful image loads -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="12" height="12">
+</svg>
diff --git a/src/components/SpinnerImage.tsx b/src/components/SpinnerImage.tsx
index ed7e0a95..05d66a56 100644
--- a/src/components/SpinnerImage.tsx
+++ b/src/components/SpinnerImage.tsx
@@ -36,7 +36,8 @@ export default function SpinnerImage(props: IProps) {
         };
 
         img.onerror = () => {
-            setImagsrc('Not Found');
+            // Setting to an actual image so CSS styling works consistently
+            setImagsrc('/notFound.svg');
         };
 
         return () => {