imageviewer.js will fallback to proxy image when full image fails to load

cache-images.go

@@ -511,5 +511,6 @@ func serveMissingImage(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Cache-Control", "no-store, must-revalidate")
 	w.Header().Set("Pragma", "no-cache")
 	w.Header().Set("Expires", "0")
+	w.WriteHeader(http.StatusNotFound)
 	http.ServeFile(w, r, missingImagePath)
 }

static/js/imageviewer.js

@@ -97,22 +97,33 @@ document.addEventListener('DOMContentLoaded', function() {
         // Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
         const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
 
-        // Check if full image is missing, fallback to proxy size
-        if (fullImageUrl === '/static/images/missing.svg') {
-            fullImageUrl = proxyFullUrl;
-        }
-    
         // Elements in the viewer
         const viewerImage = document.getElementById('viewer-image');
         const viewerTitle = document.getElementById('viewer-title');
         const fullSizeLink = document.getElementById('viewer-full-size-link');
         const proxySizeLink = document.getElementById('viewer-proxy-size-link');
     
-        viewerImage.src = fullImageUrl;
         viewerTitle.textContent = title;
-
         fullSizeLink.href = sourceUrl || proxyFullUrl;
+    
+        // Remove previous event listeners to avoid stacking
+        viewerImage.onload = null;
+        viewerImage.onerror = null;
+    
+        // Set up the error handler to switch to the proxy image if the full image fails to load
+        viewerImage.onerror = function() {
+            // Use the proxy image as a fallback
+            viewerImage.src = proxyFullUrl;
+            proxySizeLink.href = proxyFullUrl;
+        };
+    
+        // Set up the load handler to ensure the proxySizeLink is set correctly if the image loads
+        viewerImage.onload = function() {
             proxySizeLink.href = fullImageUrl;
+        };
+    
+        // Start loading the image
+        viewerImage.src = fullImageUrl;
     }    
 
     document.body.addEventListener('click', function(e) {