chore: add image loading error handling (#532)

enjoy/src/renderer/components/stories/story-card.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { cn } from "@renderer/lib/utils";
+import { cn, imgErrorToDefalut } from "@renderer/lib/utils";
 
 export const StoryCard = (props: { story: StoryType; className?: string }) => {
   const { story, className } = props;
@@ -16,6 +16,7 @@ export const StoryCard = (props: { story: StoryType; className?: string }) => {
             <img
               crossOrigin="anonymous"
               src={story.metadata.image}
+              onError={imgErrorToDefalut} 
               className="w-full h-full object-cover hover:scale-105"
             />
           </div>

enjoy/src/renderer/lib/utils.ts

@@ -137,3 +137,10 @@ export function renderPitchContour(options: {
     },
   });
 }
+
+export function imgErrorToDefalut(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+  const target = e.target as HTMLImageElement;
+  target.onerror = null; 
+  target.src = "assets/default-img.jpg";
+}
+