feat: 项目预览框支持图片 URL

- 添加 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

@@ -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">
+          <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">
-            <iframe
+            {isImageUrl(project.source) ? (
-              src={project.source}
+              <img
-              className="w-full h-full"
+                src={project.source}
-              title={`${displayName} demo`}
+                alt={`${displayName} demo`}
-              allowFullScreen
+                className="w-full h-auto"
-            />
+              />
+            ) : (
+              <iframe
+                src={project.source}
+                className="w-full aspect-video"
+                title={`${displayName} demo`}
+                allowFullScreen
+              />
+            )}
           </div>
         )}
       </header>