From f273dfc855d29cb93ab7ed3deeb6a3fabc2b9185 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:14:02 +0100
Subject: [PATCH] Fix image source for script logos across components to
 consistently use the "/ProxmoxVE/logo.png" path

---
 .../src/app/scripts/_components/ScriptAccordion.tsx  |  4 ++--
 .../src/app/scripts/_components/ScriptInfoBlocks.tsx | 12 ++++++++++--
 frontend/src/app/scripts/_components/ScriptItem.tsx  |  5 +++--
 frontend/src/components/CommandMenu.tsx              |  4 ++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/scripts/_components/ScriptAccordion.tsx b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
index b542db64..27d31445 100644
--- a/frontend/src/app/scripts/_components/ScriptAccordion.tsx
+++ b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
@@ -104,13 +104,13 @@ export default function ScriptAccordion({
                   >
                     <div className="flex items-center">
                       <Image
-                        src={script.logo || "logo.png"}
+                        src={script.logo || "/ProxmoxVE/logo.png"}
                         height={16}
                         width={16}
                         unoptimized
                         onError={(e) =>
                           ((e.currentTarget as HTMLImageElement).src =
-                            "logo.png")
+                            "/ProxmoxVE/logo.png")
                         }
                         alt={script.name}
                         className="mr-1 w-4 h-4 rounded-full"
diff --git a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
index f5ae44b0..5ce3b5a8 100644
--- a/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
+++ b/frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx
@@ -92,11 +92,15 @@ export function LatestScripts({ items }: { items: Category[] }) {
               <CardTitle className="flex items-center gap-3">
                 <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-accent p-1">
                   <Image
-                    src={script.logo || "logo.png"}
+                    src={script.logo || "/ProxmoxVE/logo.png"}
                     unoptimized
                     height={64}
                     width={64}
                     alt=""
+                    onError={(e) =>
+                      ((e.currentTarget as HTMLImageElement).src =
+                        "/ProxmoxVE/logo.png")
+                    }
                     className="h-11 w-11 object-contain"
                   />
                 </div>
@@ -161,10 +165,14 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
                 <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
                   <Image
                     unoptimized
-                    src={script.logo || "logo.png"}
+                    src={script.logo || "/ProxmoxVE/logo.png"}
                     height={64}
                     width={64}
                     alt=""
+                    onError={(e) =>
+                      ((e.currentTarget as HTMLImageElement).src =
+                        "/ProxmoxVE/logo.png")
+                    }
                     className="h-11 w-11 object-contain"
                   />
                 </div>
diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index b50b724d..2538c094 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -40,10 +40,11 @@ function ScriptItem({
               <div className="flex">
                 <Image
                   className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
-                  src={item.logo || "logo.png"}
+                  src={item.logo || "/ProxmoxVE/logo.png"}
                   width={400}
                   onError={(e) =>
-                    ((e.currentTarget as HTMLImageElement).src = "logo.png")
+                    ((e.currentTarget as HTMLImageElement).src =
+                      "/ProxmoxVE/logo.png")
                   }
                   height={400}
                   alt={item.name}
diff --git a/frontend/src/components/CommandMenu.tsx b/frontend/src/components/CommandMenu.tsx
index 79717cae..a596612f 100644
--- a/frontend/src/components/CommandMenu.tsx
+++ b/frontend/src/components/CommandMenu.tsx
@@ -102,10 +102,10 @@ export default function CommandMenu() {
                 >
                   <div className="flex gap-2" onClick={() => setOpen(false)}>
                     <Image
-                      src={script.logo || "logo.png"}
+                      src={script.logo || "/ProxmoxVE/logo.png"}
                       onError={(e) =>
                         ((e.currentTarget as HTMLImageElement).src =
-                          "logo.png")
+                          "/ProxmoxVE/logo.png")
                       }
                       unoptimized
                       width={16}