From efad1da74d10660aa2f9c98ee3bb6825086c01d8 Mon Sep 17 00:00:00 2001 From: paul Date: Mon, 14 Jul 2025 23:10:57 +0200 Subject: [PATCH] fix: resolve image and thumbnail loading issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix static file serving paths to use correct storage directory - Remove /api prefix from admin photo URLs to prevent double /api/api/ issue - Fix thumbnail URL generation in gallery to use correct path format - Update storage path resolution to support both relative and absolute paths The issues were: 1. Admin images had URLs like /api/api/admin/events/2/thumbnail/90 2. Gallery thumbnails were looking for /thumbnails/thumb_*.jpg but paths were wrong 3. Static serving middleware was using incorrect storage paths All images and thumbnails should now load correctly in both admin and gallery views. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- backend/server.js | 9 ++++++--- backend/src/routes/adminPhotos.js | 4 ++-- backend/src/routes/gallery.js | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/backend/server.js b/backend/server.js index dc62277..4867ce6 100644 --- a/backend/server.js +++ b/backend/server.js @@ -146,14 +146,17 @@ const setCorsHeaders = (req, res, next) => { // Import secure static middleware const secureStatic = require('./src/middleware/secureStatic'); +// Get storage path from environment or use default +const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../storage'); + // Static file serving for photos (protected) -app.use('/photos', require('./src/middleware/photoAuth'), setCorsHeaders, secureStatic(path.join(__dirname, 'storage/events/active'))); +app.use('/photos', require('./src/middleware/photoAuth'), setCorsHeaders, secureStatic(path.join(storagePath, 'events/active'))); // Static file serving for thumbnails (protected) -app.use('/thumbnails', require('./src/middleware/photoAuth'), setCorsHeaders, secureStatic(path.join(__dirname, 'storage/thumbnails'))); +app.use('/thumbnails', require('./src/middleware/photoAuth'), setCorsHeaders, secureStatic(path.join(storagePath, 'thumbnails'))); // Static file serving for uploads (public - logos, favicons) -app.use('/uploads', setCorsHeaders, secureStatic(path.join(__dirname, 'storage/uploads'))); +app.use('/uploads', setCorsHeaders, secureStatic(path.join(storagePath, 'uploads'))); // Health check endpoint app.get('/health', async (req, res) => { diff --git a/backend/src/routes/adminPhotos.js b/backend/src/routes/adminPhotos.js index 7f39d1c..3454e02 100644 --- a/backend/src/routes/adminPhotos.js +++ b/backend/src/routes/adminPhotos.js @@ -552,8 +552,8 @@ router.get('/:eventId/photos', adminAuth, async (req, res) => { photos: photos.map(photo => ({ id: photo.id, filename: photo.filename, - url: `/api/admin/events/${eventId}/photo/${photo.id}`, - thumbnail_url: photo.thumbnail_path ? `/api/admin/events/${eventId}/thumbnail/${photo.id}` : null, + url: `/admin/events/${eventId}/photo/${photo.id}`, + thumbnail_url: photo.thumbnail_path ? `/admin/events/${eventId}/thumbnail/${photo.id}` : null, type: photo.type, category_id: photo.category_id, category_name: photo.category_name, diff --git a/backend/src/routes/gallery.js b/backend/src/routes/gallery.js index 14a0e2e..450824c 100644 --- a/backend/src/routes/gallery.js +++ b/backend/src/routes/gallery.js @@ -157,7 +157,7 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => { id: photo.id, filename: photo.filename, url: `/photos/${photo.path}`, - thumbnail_url: photo.thumbnail_path ? `/thumbnails/${path.basename(photo.thumbnail_path)}` : null, + thumbnail_url: photo.thumbnail_path ? `/${photo.thumbnail_path}` : null, type: photo.type, category_id: photo.category_id, category_name: photo.category_name,