fix: 修复相册缩略图无法显示(dev 代理 + 前端兜底)

- vite: /uploads 代理指向源站根而非 /apnew 前缀,relative thumbnailUrl
  (/uploads/thumb…) 在 dev 下不再落到 SPA index.html
- BubbleImage: 新增 fallbackSrc 候选链,缩略图加载失败时自动回退到绝对
  thumbUrl/url,全部失败才显示占位符
- AlbumBubble / ImageLightbox: 缩略图传入绝对地址作为兜底

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

src/components/messageStream/BubbleImage.tsx

@@ -1,27 +1,49 @@
 import { ImageOff } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type BubbleImageProps = {
   src: string | undefined;
+  /**
+   * Optional absolute URL(s) to try if `src` fails to load. Useful when `src`
+   * is an optimized-but-fragile thumbnail (e.g. a root-relative thumbnailUrl)
+   * and we want to fall back to the reliable full-size asset before giving up.
+   */
+  fallbackSrc?: string | (string | undefined)[];
   className?: string;
   loading?: "lazy" | "eager";
 };
 
 /**
  * Thumbnail <img> for message bubbles. Renders with an empty alt (decorative)
- * and, if the asset fails to load, falls back to a neutral placeholder instead
+ * and, if every candidate source fails to load, falls back to a neutral
- * of the browser's broken-image box — which would otherwise expose the raw
+ * placeholder instead of the browser's broken-image box — which would otherwise
- * file name via alt text.
+ * expose the raw file name via alt text.
  */
-export function BubbleImage({ src, className, loading }: BubbleImageProps) {
+export function BubbleImage({
-  const [failed, setFailed] = useState(false);
+  src,
+  fallbackSrc,
+  className,
+  loading,
+}: BubbleImageProps) {
+  // Ordered, de-duplicated list of sources to attempt in turn.
+  const candidates = useMemo(() => {
+    const extra = Array.isArray(fallbackSrc) ? fallbackSrc : [fallbackSrc];
+    return [src, ...extra].filter(
+      (value, index, all): value is string =>
+        !!value && all.indexOf(value) === index,
+    );
+  }, [src, fallbackSrc]);
 
-  // Reset when the source changes so a reused element re-attempts the new src.
+  const [attempt, setAttempt] = useState(0);
+
+  // Reset when the candidate set changes so a reused element re-attempts.
   useEffect(() => {
-    setFailed(false);
+    setAttempt(0);
-  }, [src]);
+  }, [candidates]);
 
-  if (!src || failed) {
+  const current = candidates[attempt];
+
+  if (!current) {
     return (
       <div
         className={`flex items-center justify-center bg-gradient-to-br from-neutral-800 to-neutral-900 ${
@@ -36,11 +58,11 @@ export function BubbleImage({ src, className, loading }: BubbleImageProps) {
 
   return (
     <img
-      src={src}
+      src={current}
       alt=""
       loading={loading}
       className={className}
-      onError={() => setFailed(true)}
+      onError={() => setAttempt((i) => i + 1)}
     />
   );
 }

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -50,7 +50,8 @@ export function AlbumBubble({ post }: { post: Post }) {
                 }
               >
                 <BubbleImage
-                  src={att.thumbnailUrl ?? att.url}
+                  src={att.thumbnailUrl ?? att.thumbUrl ?? att.url}
+                  fallbackSrc={[att.thumbUrl, att.url]}
                   loading="lazy"
                   className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
                 />

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -169,6 +169,7 @@ function Filmstrip({
             >
               <BubbleImage
                 src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
+                fallbackSrc={[image.thumbUrl, image.url]}
                 className="h-full w-full object-cover"
               />
             </button>

vite.config.ts

@@ -4,6 +4,17 @@ import react from "@vitejs/plugin-react";
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const apiProxyTarget = env.DEV_API_PROXY_TARGET || "http://127.0.0.1:8080";
+  // Uploaded assets (thumbnails etc.) are served from the site root, NOT under
+  // the API's /apnew prefix. Proxy /uploads to the origin root so relative
+  // thumbnailUrls like "/uploads/thumb52-….jpg" resolve to a real image in dev
+  // instead of falling through to the SPA's index.html.
+  const uploadsProxyTarget = (() => {
+    try {
+      return new URL(apiProxyTarget).origin;
+    } catch {
+      return apiProxyTarget;
+    }
+  })();
 
   return {
     plugins: [react()],
@@ -26,7 +37,7 @@ export default defineConfig(({ mode }) => {
           rewrite: (path) => path.replace(/^\/apnew/, ""),
         },
         "/api": { target: apiProxyTarget, changeOrigin: true },
-        "/uploads": { target: apiProxyTarget, changeOrigin: true },
+        "/uploads": { target: uploadsProxyTarget, changeOrigin: true },
       },
     },
   };