.

api/routers/generate.py

@@ -76,6 +76,30 @@ async def get_image(filename: str):
     return FileResponse(filepath)
 
 
+@router.get("/serve-image")
+async def serve_image(filename: Optional[str] = None):
+    """
+    Proxy endpoint for generated images: serve from local disk or fetch from R2.
+    Use this when the client cannot reach R2 (e.g. net::ERR_TUNNEL_CONNECTION_FAILED).
+    No auth so gallery and public views can load images.
+    """
+    if not filename or ".." in filename or "/" in filename or "\\" in filename:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+    filepath = os.path.join(settings.output_dir, filename)
+    if os.path.exists(filepath):
+        return FileResponse(filepath)
+    try:
+        from services.r2_storage import get_r2_storage
+        r2 = get_r2_storage()
+        if r2:
+            data = r2.get_object_bytes(filename)
+            if data:
+                return FastAPIResponse(content=data, media_type="image/png")
+    except Exception:
+        pass
+    raise HTTPException(status_code=404, detail="Image not found")
+
+
 @router.get("/api/download-image")
 async def download_image_proxy(
     image_url: Optional[str] = None,

frontend/lib/utils/formatters.ts

@@ -80,7 +80,20 @@ export const truncateText = (text: string, maxLength: number): string => {
   return text.slice(0, maxLength) + "...";
 };
 
-const getApiBase = () => process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+/**
+ * API base for building image/asset URLs. Avoids mixed content on HTTPS:
+ * - Empty NEXT_PUBLIC_API_URL → same origin (relative).
+ * - In browser on HTTPS with no API URL set → use current origin so we don't request http://localhost.
+ */
+function getApiBase(): string {
+  const env = process.env.NEXT_PUBLIC_API_URL;
+  if (env === "") return "";
+  if (env && (env.startsWith("http://") || env.startsWith("https://"))) return env;
+  if (typeof window !== "undefined" && window.location?.protocol === "https:") {
+    return window.location.origin;
+  }
+  return "http://localhost:8000";
+}
 
 const isAbsoluteUrl = (url: string) =>
   typeof url === "string" && (url.startsWith("http://") || url.startsWith("https://"));
@@ -103,8 +116,8 @@ export const getImageUrl = (
 };
 
 /**
- * Primary = R2 URL or absolute image_url (for display). Fallback = local /images/{filename} or relative URL.
- * Use primary in <img src>, then onError switch to fallback so images show via R2 when available.
+ * Primary = R2 URL or absolute image_url (for display). Fallback = backend proxy (serve-image) or local /images.
+ * Use primary in <img src>, then onError switch to fallback. Proxy fetches from R2 server-side when the client cannot reach R2 (e.g. ERR_TUNNEL_CONNECTION_FAILED).
  */
 export const getImageUrlFallback = (
   imageUrl: string | null | undefined,
@@ -116,11 +129,14 @@ export const getImageUrlFallback = (
     (r2Url && isAbsoluteUrl(r2Url)) ? r2Url
     : (imageUrl && isAbsoluteUrl(imageUrl)) ? imageUrl
     : null;
+  const fromProxy = filename
+    ? `${apiBase}/serve-image?filename=${encodeURIComponent(filename)}`
+    : null;
   const fromFilename = filename ? `${apiBase}/images/${filename}` : null;
   const fromRelative =
     imageUrl && typeof imageUrl === "string" && imageUrl.startsWith("/")
       ? `${apiBase}${imageUrl}`
       : null;
-  const fallback = fromFilename ?? fromRelative ?? null;
+  const fallback = fromProxy ?? fromFilename ?? fromRelative ?? null;
   return { primary, fallback };
 };

services/r2_storage.py

@@ -109,6 +109,18 @@ class R2StorageService:
             print(f"Error uploading to R2: {e}")
             raise Exception(f"Failed to upload image to R2: {str(e)}")
     
+    def get_object_bytes(self, filename: str) -> Optional[bytes]:
+        """
+        Download image bytes from R2 by filename (server-side).
+        Use this to proxy images when the client cannot reach R2 (e.g. ERR_TUNNEL_CONNECTION_FAILED).
+        """
+        r2_key = f"{self.folder}/{filename}"
+        try:
+            response = self.s3_client.get_object(Bucket=self.bucket_name, Key=r2_key)
+            return response["Body"].read()
+        except (ClientError, BotoCoreError):
+            return None
+    
     def get_public_url(self, filename: str) -> str:
         """
         Get public URL for an image in R2.