fix: clear img srcset on fallback to force browser reload

Removing <source> elements alone doesn't force the browser to
re-evaluate the image. Also clear the img's srcset attribute
so the browser uses img.src directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/components/ImageCard.tsx

@@ -181,11 +181,11 @@ export const ImageCard = memo(function ImageCard({
             }}
             onError={(e: React.SyntheticEvent<HTMLImageElement>) => {
               const target = e.target as HTMLImageElement;
-              // Remove <source> elements so browser uses img.src fallback
+              // Remove <source> elements and clear srcset so browser falls back to plot.png
               if (!target.dataset.fallback) {
                 target.dataset.fallback = '1';
-                const picture = target.closest('picture');
-                picture?.querySelectorAll('source').forEach(s => s.remove());
+                target.closest('picture')?.querySelectorAll('source').forEach(s => s.remove());
+                target.removeAttribute('srcset');
                 target.src = image.url;
               } else {
                 target.style.display = 'none';

app/src/components/SpecDetailView.tsx

@@ -118,8 +118,8 @@ export function SpecDetailView({
                 const target = e.target as HTMLImageElement;
                 if (!target.dataset.fallback) {
                   target.dataset.fallback = '1';
-                  const picture = target.closest('picture');
-                  picture?.querySelectorAll('source').forEach(s => s.remove());
+                  target.closest('picture')?.querySelectorAll('source').forEach(s => s.remove());
+                  target.removeAttribute('srcset');
                   target.src = currentImpl.preview_url!;
                 }
               }}

app/src/components/SpecOverview.tsx

@@ -177,8 +177,8 @@ function ImplementationCard({
                 const target = e.target as HTMLImageElement;
                 if (!target.dataset.fallback) {
                   target.dataset.fallback = '1';
-                  const picture = target.closest('picture');
-                  picture?.querySelectorAll('source').forEach(s => s.remove());
+                  target.closest('picture')?.querySelectorAll('source').forEach(s => s.remove());
+                  target.removeAttribute('srcset');
                   target.src = impl.preview_url!;
                 }
               }}

app/src/pages/CatalogPage.tsx

@@ -275,8 +275,8 @@ export function CatalogPage() {
                           const target = e.target as HTMLImageElement;
                           if (!target.dataset.fallback) {
                             target.dataset.fallback = '1';
-                            const picture = target.closest('picture');
-                            picture?.querySelectorAll('source').forEach(s => s.remove());
+                            target.closest('picture')?.querySelectorAll('source').forEach(s => s.remove());
+                            target.removeAttribute('srcset');
                             target.src = currentImage.url;
                           }
                         }}