slight fixes to fix the image displayment

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 = '<p>Lade Details...</p>';
         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 `
-                        <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
-                            <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
-                            <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
-                                ▶
-                            </div>
-                        </div>`;
+                    <div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
+                        <img src="${videoSrc}" alt="${escapeHtml(item.Name || 'Medium')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
+                        <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
+                            ▶
+                        </div>
+                    </div>`;
                     } else {
                         return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
                     }
@@ -1305,21 +1304,17 @@
             mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
         }
 
-        // 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 = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden. Bitte versuche es später erneut.</p>';
+                detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden.</p>';
             });
     }