1 files changed, 24 insertions, 30 deletions
diff --git a/front-end/src/views/Blog/components/image-preview-dialog.vue b/front-end/src/views/Blog/components/image-preview-dialog.vue
index 5cfe552..b134d19 100644
--- a/front-end/src/views/Blog/components/image-preview-dialog.vue
+++ b/front-end/src/views/Blog/components/image-preview-dialog.vue
@@ -1,34 +1,14 @@
-<template>
-    <div class="">
-        <Dialog :open="isOpen" @close="onClose" class="relative z-50">
-        <!-- The backdrop, rendered as a fixed sibling to the panel container -->
-        <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
-
-        <!-- Full-screen container to center the panel -->
-        <div class="fixed inset-0 flex items-center justify-center w-screen p-4">
-          <!-- The actual dialog panel -->
-          <DialogPanel class="p-2 bg-white rounded dark:bg-dark-700" ref="dialog">
-            <DialogDescription>
-              <img class="preview-image" :src="imgUrl" alt="preview" />
-            </DialogDescription>
-            <!-- ... -->
-          </DialogPanel>
-        </div>
-      </Dialog>
-    </div>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, watch, toRefs } from 'vue'
 import { Dialog, DialogDescription } from '@headlessui/vue'
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, set } from '@vueuse/core';
 import { useStore } from '../../../store';
 import { ContentMeta } from '../../../../../lib/admin/dist';
 import { isNil } from 'lodash-es';
 import { apiCall } from '@vnuge/vnlib.browser';
 
 const emit = defineEmits(['close'])
-const props = defineProps<{ 
+const props = defineProps<{
     item: ContentMeta | undefined,
 }>()
 
@@ -52,19 +32,33 @@ const downloadImage = (item: ContentMeta) => {
     })
 }
 
-//load the image when open
-watch(item, (item) => {
-    if (isNil(item)) {
-        imgUrl.value = undefined
-    } else {
-        downloadImage(item)
-    }
-})
+//load the image when open or remove it if the item is undefined
+watch(item, (item) => isNil(item) ? set(imgUrl, undefined) : downloadImage(item))
 
 //Close dialog when clicking outside
 onClickOutside(dialog, onClose)
 
 </script>
+
+<template>
+    <div class="">
+        <Dialog :open="isOpen" @close="onClose" class="relative z-50">
+        <!-- The backdrop, rendered as a fixed sibling to the panel container -->
+        <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+        <!-- Full-screen container to center the panel -->
+        <div class="fixed inset-0 flex items-center justify-center w-screen p-4">
+          <!-- The actual dialog panel -->
+          <DialogPanel class="p-2 bg-white rounded dark:bg-dark-700" ref="dialog">
+            <DialogDescription>
+              <img class="preview-image" :src="imgUrl" alt="preview" />
+            </DialogDescription>
+            <!-- ... -->
+          </DialogPanel>
+        </div>
+      </Dialog>
+    </div>
+</template>
 <style lang="scss"> 
 
 .preview-image {