improved ipam

public/plugins/vue/tt-components/tt-file-gallery.js

@@ -241,6 +241,7 @@ Vue.component('tt-file-gallery', {
         fullscreenItem: null,
         editingFile: null,
         selectedFiles: [],
+        missingFileIds: new Set(),
     }),
     computed: {
         imageFiles() {
@@ -267,7 +268,6 @@ Vue.component('tt-file-gallery', {
                     return 'fas fa-file text-secondary';
             }
         },
-
         toggleSelection(fileId) {
             if (!this.selectable) return;
             const index = this.selectedFiles.indexOf(fileId);
@@ -275,9 +275,16 @@ Vue.component('tt-file-gallery', {
             else this.selectedFiles.push(fileId);
             this.$emit('selection-changed', this.selectedFiles);
         },
-
+        handleImageError(file) {
+            if (!file || !file.id) return;
+            this.missingFileIds.add(file.id);
+            this.$forceUpdate(); // Force a re-render as Vue might not detect the Set change
+        },
+        isMissing(file) {
+            return this.missingFileIds.has(file.id);
+        },
         openViewer(file) {
-            if (this.editingFile) return;
+            if (this.isMissing(file) || this.editingFile) return;
             this.fullscreenItem = file;
         },
         closeViewer() {
@@ -310,21 +317,26 @@ Vue.component('tt-file-gallery', {
         <div v-else class="card-body">
           <div class="tt-file-gallery-grid">
             <div v-for="file in files" :key="file.id" class="tt-file-gallery-item"
-                 :class="[{ 'selected': selectable && selectedFiles.includes(file.id) }, file.class]"
+                 :class="[{ 'selected': selectable && selectedFiles.includes(file.id), 'is-missing': isMissing(file) }, file.class]"
                  @click="openViewer(file)">
               <div v-if="selectable" class="selection-indicator" @click.stop="toggleSelection(file.id)">
                 <i :class="selectedFiles.includes(file.id) ? 'fas fa-check-circle text-primary' : 'far fa-circle text-muted'"></i>
               </div>
               <div class="tt-file-gallery-thumbnail-wrapper">
-                <img v-if="isImage(file)" :src="'/File/show?id=' + file.fileId + '&size=small'"
-                     class="tt-file-gallery-thumbnail" :alt="file.fileName">
-                <div v-else-if="isPdf(file)" class="tt-file-gallery-icon-container"><i
-                    class="fas fa-file-pdf fa-3x text-danger"></i></div>
+                <div v-if="isMissing(file)" class="tt-file-gallery-icon-container">
+                  <i class="fas fa-exclamation-triangle fa-3x text-warning" title="File not found"></i>
+                </div>
+                <img v-else-if="isImage(file)" :src="'/File/show?id=' + file.fileId + '&size=small'"
+                     class="tt-file-gallery-thumbnail" :alt="file.fileName" @error="handleImageError(file)">
+                <div v-else-if="isPdf(file)" class="tt-file-gallery-icon-container">
+                  <i class="fas fa-file-pdf fa-3x text-danger"></i>
+                </div>
                 <a v-else :href="'/File/download?id=' + file.fileId" target="_blank" @click.stop
                    class="tt-file-gallery-icon-container">
                   <i :class="getFileIcon(file)" class="fa-3x"></i>
                 </a>
-                <div class="tt-file-gallery-overlay" @click.stop="openViewer(file)"><i class="fas fa-search-plus"></i>
+                <div class="tt-file-gallery-overlay" @click.stop="openViewer(file)">
+                  <i class="fas fa-search-plus"></i>
                 </div>
               </div>
               <div class="tt-file-gallery-filename" :title="file.fileName">