From 0a46ccc44afe1321deaf4cebddd44f179da2bbc4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 15:55:52 +0000
Subject: [PATCH] Fix image display issue

---
 src/components/upload/PhotoUpload.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/upload/PhotoUpload.tsx b/src/components/upload/PhotoUpload.tsx
index 1338396d..78a9e282 100644
--- a/src/components/upload/PhotoUpload.tsx
+++ b/src/components/upload/PhotoUpload.tsx
@@ -239,6 +239,13 @@ export function PhotoUpload({
                 src={uploadedImages[0].thumbnailUrl} 
                 alt="Avatar"
                 className="w-24 h-24 rounded-full object-cover border-2 border-border"
+                onError={(e) => {
+                  console.error('Failed to load avatar image:', uploadedImages[0].thumbnailUrl);
+                  e.currentTarget.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZjNmNGY2Ii8+CjxwYXRoIGQ9Im0xNSAxMi0zLTMtMy4wMDEgM0w2IDlsNi02aDZ2NloiIGZpbGw9IiM5Y2EzYWYiLz4KPC9zdmc+';
+                }}
+                onLoad={() => {
+                  console.log('Avatar image loaded successfully:', uploadedImages[0].thumbnailUrl);
+                }}
               />
             ) : existingPhotos.length > 0 ? (
               <img 
@@ -381,6 +388,13 @@ export function PhotoUpload({
                   src={image.thumbnailUrl} 
                   alt={image.filename}
                   className="w-full aspect-square object-cover rounded-lg border"
+                  onError={(e) => {
+                    console.error('Failed to load image:', image.thumbnailUrl);
+                    e.currentTarget.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZjNmNGY2Ii8+CjxwYXRoIGQ9Im0xNSAxMi0zLTMtMy4wMDEgM0w2IDlsNi02aDZ2NloiIGZpbGw9IiM5Y2EzYWYiLz4KPC9zdmc+';
+                  }}
+                  onLoad={() => {
+                    console.log('Image loaded successfully:', image.thumbnailUrl);
+                  }}
                 />
                 <Button
                   variant="destructive"
@@ -412,6 +426,13 @@ export function PhotoUpload({
                   src={url} 
                   alt={`Existing photo ${index + 1}`}
                   className="w-full aspect-square object-cover rounded-lg border"
+                  onError={(e) => {
+                    console.error('Failed to load existing image:', url);
+                    e.currentTarget.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjZjNmNGY2Ii8+CjxwYXRoIGQ9Im0xNSAxMi0zLTMtMy4wMDEgM0w2IDlsNi02aDZ2NloiIGZpbGw9IiM5Y2EzYWYiLz4KPC9zdmc+';
+                  }}
+                  onLoad={() => {
+                    console.log('Existing image loaded successfully:', url);
+                  }}
                 />
                 <Badge variant="outline" className="absolute bottom-2 left-2 text-xs">
                   Existing