🐛 Add a fallback image if the image path is broken for whatever reason

Signed-off-by: ibolton336 <[email protected]>

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,14 +109,17 @@ 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 = () => (
         <img
           src={imagePath}
           alt="Card logo"
           style={{ height: 80, pointerEvents: "none" }}
+          onError={(e) => {
+            e.currentTarget.src = DefaultRulesetIcon;
+          }}
         />
       );
     }