diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html index 59e56d8..a98be4a 100644 --- a/Web/templates/library_table.html +++ b/Web/templates/library_table.html @@ -1256,23 +1256,22 @@ const detailContent = document.getElementById('detailContent'); const detailModal = document.getElementById('detailModal'); - // 1. Show the loading state immediately detailContent.innerHTML = '

Lade Details...

'; detailModal.style.display = 'flex'; - // 2. Generate Image/Video Gallery Client-Side const item = libraryItems.find(i => i._id === itemId); let mediaHtml = ''; - // Sicherstellen, dass item.Images existiert und ein Array mit Elementen ist - if (item && Array.isArray(item.Images) && item.Images.length > 0) { - const imagesHtml = item.Images.map((image, index) => { - // Robuste Pfad-Generierung: Startet es nicht mit http oder /, setzen wir /uploads/ davor - let imageSrc = image; - if (!image.startsWith('http') && !image.startsWith('/')) { - // Passe "/uploads/" an, falls dein Server-Ordner für Bilder anders heißt (z.B. "/static/uploads/") - imageSrc = '/uploads/' + image; - } + // Robuste Prüfung: Wir testen gängige Benennungen aus deinem Backend + const imageArray = item.Images || item.Bilder || item.images; + + if (item && Array.isArray(imageArray) && imageArray.length > 0) { + const imagesHtml = imageArray.map((image, index) => { + + // Dein neuer Code für die exakte Routen-Generierung + const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ? + image : + `{{ url_for('uploaded_file', filename='') }}${image}`; const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index]; const isVideo = isVideoFile(image); @@ -1284,12 +1283,12 @@ if (thumbnailInfo && thumbnailInfo.has_thumbnail) { return ` -
- ${escapeHtml(item.Name || 'Medium')} -
- ▶ -
-
`; +
+ ${escapeHtml(item.Name || 'Medium')} +
+ ▶ +
+
`; } else { return `
VIDEO
`; } @@ -1305,21 +1304,17 @@ mediaHtml = ``; } - // 3. Fetch the data fetch(`/api/item_detail/${itemId}`) .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } + if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.text(); }) .then(html => { - // 4. Clean the HTML and display it, injecting the media gallery before the fetched content detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html); }) .catch(err => { console.error('Error loading detail:', err); - detailContent.innerHTML = '

Entschuldigung, die Details konnten nicht geladen werden. Bitte versuche es später erneut.

'; + detailContent.innerHTML = '

Entschuldigung, die Details konnten nicht geladen werden.

'; }); }