Set Fallback Image for broken Thumbnails (#50)

ntbm · web-flow · commit 9875cbdc7028 · 2021-10-27T00:11:28.000+03:30
* Set Fallback Image for broken Thumbnails

* Transparent placeholder

* Added some comments
diff --git a/public/notFound.svg 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
@@ -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 () => {
