Fix image loading

frontend/src/components/stories/StoryCard.tsx

@@ -8,6 +8,27 @@ import { storyApi, getImageUrl } from '../../lib/api';
 import Button from '../ui/Button';
 import TagDisplay from '../tags/TagDisplay';
 
+// Detects systemic image load failures (e.g. wrong library ID) and reloads the page.
+// Guards against infinite loops: max 2 auto-reloads per session.
+const imageErrorTracker = {
+  errors: [] as number[],
+  reload() {
+    const count = parseInt(sessionStorage.getItem('storycove-reload-count') || '0');
+    if (count < 2) {
+      sessionStorage.setItem('storycove-reload-count', String(count + 1));
+      window.location.reload();
+    }
+  },
+  report() {
+    const now = Date.now();
+    this.errors = this.errors.filter(t => now - t < 3000);
+    this.errors.push(now);
+    if (this.errors.length >= 3) {
+      this.reload();
+    }
+  }
+};
+
 interface StoryCardProps {
   story: Story;
   viewMode: 'grid' | 'list';
@@ -91,6 +112,7 @@ export default function StoryCard({
                     height={80}
                     className="w-full h-full object-cover"
                     unoptimized
+                    onError={() => imageErrorTracker.report()}
                   />
                 ) : (
                   <div className="w-full h-full flex items-center justify-center theme-text text-xs">
@@ -209,6 +231,7 @@ export default function StoryCard({
               height={400}
               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
               unoptimized
+              onError={() => imageErrorTracker.report()}
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center theme-text text-6xl">