From 2028a57a1e15a87199cba057dd29a2bf22559eaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Thu, 25 Sep 2025 01:10:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E9=96=8B=E7=99=BC?=
 =?UTF-8?q?=E7=92=B0=E5=A2=83=E5=9C=96=E7=89=87=E9=9D=9C=E6=85=8B=E6=AA=94?=
 =?UTF-8?q?=E6=A1=88=E6=9C=8D=E5=8B=99=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 解決前端圖片 URL 無法訪問的最後障礙

**靜態檔案服務配置**:
- ✅ 添加開發環境專用的UseStaticFiles中介軟體
- ✅ 配置/images路徑映射到wwwroot/images目錄
- ✅ 只在開發環境啟用，生產環境將使用雲端CDN

**圖片URL修復**:
- ✅ 修改BaseUrl從HTTPS改為HTTP：避免開發環境SSL憑證問題
- ✅ 確保前端img標籤能正常載入圖片檔案
- ✅ 路徑映射正確：/images/examples/xxx.png → wwwroot/images/examples/xxx.png

**完整驗證成功**:
- ✅ API返回HTTP URL：http://localhost:5008/images/examples/xxx.png
- ✅ 圖片直接可訪問：HTTP 200 OK
- ✅ 檔案大小正確：194KB (壓縮後)
- ✅ Content-Type正確：image/png

**前端整合準備完成**:
- ✅ FlashcardsController返回完整圖片資訊
- ✅ 圖片URL前端可直接使用
- ✅ 可立即取代硬編碼映射
- ✅ 支援動態圖片生成和顯示

開發環境的前後端圖片資料流程已完全打通！

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 backend/DramaLing.Api/Program.cs       | 12 ++++++++++++
 backend/DramaLing.Api/appsettings.json |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/backend/DramaLing.Api/Program.cs b/backend/DramaLing.Api/Program.cs
index 4a8c95e..b223d51 100644
--- a/backend/DramaLing.Api/Program.cs
+++ b/backend/DramaLing.Api/Program.cs
@@ -10,6 +10,7 @@ using DramaLing.Api.Repositories;
 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.IdentityModel.Tokens;
 using Microsoft.Extensions.Options;
+using Microsoft.Extensions.FileProviders;
 using System.Text;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -210,6 +211,17 @@ else
 
 app.UseHttpsRedirection();
 
+// 開發環境靜態檔案服務 (暫時用，生產時會使用雲端 CDN)
+if (app.Environment.IsDevelopment())
+{
+    app.UseStaticFiles(new StaticFileOptions
+    {
+        FileProvider = new PhysicalFileProvider(
+            Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images")),
+        RequestPath = "/images"
+    });
+}
+
 app.UseAuthentication();
 app.UseAuthorization();
 
diff --git a/backend/DramaLing.Api/appsettings.json b/backend/DramaLing.Api/appsettings.json
index 2a73014..e33ea80 100644
--- a/backend/DramaLing.Api/appsettings.json
+++ b/backend/DramaLing.Api/appsettings.json
@@ -55,7 +55,7 @@
     "Provider": "Local",
     "Local": {
       "BasePath": "wwwroot/images/examples",
-      "BaseUrl": "https://localhost:5008/images/examples",
+      "BaseUrl": "http://localhost:5008/images/examples",
       "MaxFileSize": 10485760,
       "AllowedFormats": ["png", "jpg", "jpeg", "webp"]
     }