From 6e16089a49abef91aa27d256fc02d32a1688a6d6 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Wed, 27 Sep 2023 11:42:50 -0400
Subject: [PATCH] :bug: Add a fallback image if the image path is broken for
 whatever reason

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 client/src/app/components/TargetCard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/app/components/TargetCard.tsx b/client/src/app/components/TargetCard.tsx
index 5044d0af22..a7dcd0c7f6 100644
--- a/client/src/app/components/TargetCard.tsx
+++ b/client/src/app/components/TargetCard.tsx
@@ -32,6 +32,7 @@ import { KebabDropdown } from "./KebabDropdown";
 import DefaultRulesetIcon from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
 import { Target, TargetLabel } from "@app/api/models";
 import "./TargetCard.css";
+import { FILES } from "@app/api/rest";
 
 export interface TargetCardProps {
   item: Target;
@@ -108,7 +109,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
   const getImage = (): React.ComponentType => {
     let result: React.ComponentType<any> = CubesIcon;
     const imagePath = target?.image?.id
-      ? `/hub/files/${target?.image.id}`
+      ? `${FILES}${target?.image.id}`
       : DefaultRulesetIcon;
     if (target.image) {
       result = () => (
@@ -116,6 +117,9 @@ export const TargetCard: React.FC<TargetCardProps> = ({
           src={imagePath}
           alt="Card logo"
           style={{ height: 80, pointerEvents: "none" }}
+          onError={(e) => {
+            e.currentTarget.src = DefaultRulesetIcon;
+          }}
         />
       );
     }