fixed invalid links on images when DriveCache was disabled

cache-images.go

@@ -511,6 +511,8 @@ 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)
+	if config.DriveCacheEnabled {
+		w.WriteHeader(http.StatusNotFound)
+	}
 	http.ServeFile(w, r, missingImagePath)
 }

static/js/dynamicscrollingimages.js

@@ -81,18 +81,23 @@
                         // Get the img element
                         let img = imageDiv.querySelector('img');
                         if (img) {
+                            let id = img.getAttribute('data-id');
+                            if (id) {
+                                imageElements.push(img);
+                                imageIds.push(id);
+                            }
                             if (hardCacheEnabled) {
                                 // Replace image with placeholder
                                 img.src = '/static/images/placeholder.svg';
                                 img.onerror = function() {
                                     handleImageError(img);
                                 };
-    
+                            } else {
-                                let id = img.getAttribute('data-id');
+                                // HardCacheEnabled is false; load images immediately
-                                if (id) {
+                                img.src = img.getAttribute('data-full');
-                                    imageElements.push(img);
+                                img.onerror = function() {
-                                    imageIds.push(id);
+                                    handleImageError(img);
-                                }
+                                };
                             }
                         }
                     });
@@ -152,12 +157,12 @@
     }
 
     // Initialize imageElements and imageIds
-    if (hardCacheEnabled) {
+    imageElements = Array.from(document.querySelectorAll('img[data-id]'));
-        imageElements = Array.from(document.querySelectorAll('img[data-id]'));
+    imageIds = imageElements
-        imageIds = imageElements
+        .map(img => img.getAttribute('data-id'))
-            .map(img => img.getAttribute('data-id'))
+        .filter(id => id); // Exclude empty IDs
-            .filter(id => id); // Exclude empty IDs
 
+    if (hardCacheEnabled) {
         // Replace images with placeholders
         imageElements.forEach(img => {
             img.src = '/static/images/placeholder.svg';
@@ -166,11 +171,19 @@
         // Start checking image status
         let imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval);
         checkImageStatus(); // Initial check
-
+    } else {
-        // After initial images are loaded, ensure the page is scrollable
+        // HardCacheEnabled is false; load images immediately
-        window.addEventListener('load', ensureScrollable);
+        imageElements.forEach(img => {
+            img.src = img.getAttribute('data-full');
+            img.onerror = function() {
+                handleImageError(img);
+            };
+        });
     }
 
+    // After initial images are loaded, ensure the page is scrollable
+    window.addEventListener('load', ensureScrollable);
+
     // Infinite scrolling
     window.addEventListener('scroll', function() {
         if (isFetching || noMoreImages) return;

templates/images.html

@@ -98,11 +98,19 @@
             <div class="image">
                 {{ if $.HardCacheEnabled }}
                     <noscript>
-                        <!-- JavaScript is disabled; serve actual images -->
+                        <!-- JavaScript is disabled; serve actual images without placeholders; serve proxy image since HardCache is enabled -->
-                        <img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
+                        <img
+                            src="{{ $result.ProxyFull }}"
+                            data-id="{{ $result.ID }}"
+                            data-full="{{ $result.ProxyFull }}"
+                            data-proxy-full="{{ $result.ProxyThumb }}"
+                            data-source="{{ $result.Source }}"
+                            alt="{{ $result.Title }}"
+                            class="clickable"
+                        />
                     </noscript>
                     
-                    <!-- JavaScript is enabled; use placeholders -->
+                    <!-- JavaScript is enabled; use placeholders; serve proxy image since HardCache is enabled -->
                     <img
                         src="/static/images/placeholder.svg"
                         data-id="{{ $result.ID }}"
@@ -113,8 +121,29 @@
                         class="clickable placeholder-img"
                     />
                 {{ else }}
-                    <!-- HardCacheEnabled is false; serve images directly -->
+                    <!-- JavaScript is enabled; use placeholders; serve full image since HardCache is disabled -->
-                    <img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
+                    <img
+                        src="/static/images/placeholder.svg"
+                        data-id="{{ $result.ID }}"
+                        data-full="{{ $result.ProxyFull }}"
+                        data-proxy-full="{{ $result.ProxyThumb }}"
+                        data-source="{{ $result.Source }}"
+                        alt="{{ $result.Title }}"
+                        class="clickable placeholder-img"
+                    />
+
+                    <noscript>
+                        <!-- JavaScript is disabled; serve actual images without placeholders; serve full image since HardCache is disabled -->
+                        <img
+                            src="{{ $result.ProxyFull }}"
+                            data-id="{{ $result.ID }}"
+                            data-full="{{ $result.ProxyFull }}"
+                            data-proxy-full="{{ $result.ProxyThumb }}"
+                            data-source="{{ $result.Source }}"
+                            alt="{{ $result.Title }}"
+                            class="clickable"
+                        />
+                    </noscript>
                 {{ end }}
                 <div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
                 <div class="details">

templates/images_only.html

@@ -1,6 +1,20 @@
 {{ range $index, $result := .Results }}
 <div class="image">
     {{ if $.HardCacheEnabled }}
+        <noscript>
+            <!-- JavaScript is disabled; serve actual images without placeholders; serve proxy image since HardCache is enabled -->
+            <img
+                src="{{ $result.ProxyFull }}"
+                data-id="{{ $result.ID }}"
+                data-full="{{ $result.ProxyFull }}"
+                data-proxy-full="{{ $result.ProxyThumb }}"
+                data-source="{{ $result.Source }}"
+                alt="{{ $result.Title }}"
+                class="clickable"
+            />
+        </noscript>
+        
+        <!-- JavaScript is enabled; use placeholders; serve proxy image since HardCache is enabled -->
         <img
             src="/static/images/placeholder.svg"
             data-id="{{ $result.ID }}"
@@ -11,8 +25,29 @@
             class="clickable placeholder-img"
         />
     {{ else }}
-        <!-- HardCacheEnabled is false; serve images directly -->
+        <!-- JavaScript is enabled; use placeholders; serve full image since HardCache is disabled -->
-        <img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
+        <img
+            src="/static/images/placeholder.svg"
+            data-id="{{ $result.ID }}"
+            data-full="{{ $result.ProxyFull }}"
+            data-proxy-full="{{ $result.ProxyThumb }}"
+            data-source="{{ $result.Source }}"
+            alt="{{ $result.Title }}"
+            class="clickable placeholder-img"
+        />
+
+        <noscript>
+            <!-- JavaScript is disabled; serve actual images without placeholders; serve full image since HardCache is disabled -->
+            <img
+                src="{{ $result.ProxyFull }}"
+                data-id="{{ $result.ID }}"
+                data-full="{{ $result.ProxyFull }}"
+                data-proxy-full="{{ $result.ProxyThumb }}"
+                data-source="{{ $result.Source }}"
+                alt="{{ $result.Title }}"
+                class="clickable"
+            />
+        </noscript>
     {{ end }}
     <div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
     <div class="details">