From bb1bee58c7882765708457f18bed97f7054911a9 Mon Sep 17 00:00:00 2001
From: Caihaohan <caihaohan0712@foxmail.com>
Date: Tue, 30 Dec 2025 19:57:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=A1=86=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 isImageUrl 辅助函数检测 URL 是否为图片
- 根据资源类型条件渲染 img 或 iframe 标签
- 图片资源自适应高度，iframe 保持 16:9 比例

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/project/ProjectDetail.tsx | 29 ++++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/project/ProjectDetail.tsx b/src/components/project/ProjectDetail.tsx
index 26fea0c..6624e1d 100644
--- a/src/components/project/ProjectDetail.tsx
+++ b/src/components/project/ProjectDetail.tsx
@@ -48,6 +48,13 @@ function formatDate(date: Date | string, locale: string): string {
   }
 }
 
+// Helper function to check if URL is an image
+function isImageUrl(url: string): boolean {
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp']
+  const lowerUrl = url.toLowerCase()
+  return imageExtensions.some(ext => lowerUrl.includes(ext))
+}
+
 export async function ProjectDetail({ project, locale }: ProjectDetailProps) {
   const t = await getTranslations('project')
 
@@ -110,13 +117,21 @@ export async function ProjectDetail({ project, locale }: ProjectDetailProps) {
 
         {/* Featured Image/Video Placeholder - only show if source exists */}
         {project.source && (
-          <div className="relative w-full aspect-video border-2 border-black dark:border-gray-600 bg-gray-100 dark:bg-gray-800 mb-10 overflow-hidden shadow-brutal dark:shadow-brutal-dark">
-            <iframe
-              src={project.source}
-              className="w-full h-full"
-              title={`${displayName} demo`}
-              allowFullScreen
-            />
+          <div className="relative w-full border-2 border-black dark:border-gray-600 bg-gray-100 dark:bg-gray-800 mb-10 overflow-hidden shadow-brutal dark:shadow-brutal-dark">
+            {isImageUrl(project.source) ? (
+              <img
+                src={project.source}
+                alt={`${displayName} demo`}
+                className="w-full h-auto"
+              />
+            ) : (
+              <iframe
+                src={project.source}
+                className="w-full aspect-video"
+                title={`${displayName} demo`}
+                allowFullScreen
+              />
+            )}
           </div>
         )}
       </header>