feat: zoom image home

src/pages/Cms/HomeView.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, onMounted, inject } from 'vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 const jApi = inject('jApi');
 const news = ref([]);
 const showPreview = ref(false);
@@ -14,6 +13,15 @@ const fetchData = async () => {
     );
 };
 
+const showImagePreview = src => {
+    showPreview.value = true;
+    selectedImageSrc.value = src;
+};
+const hideImagePreview = src => {
+    showPreview.value = false;
+    selectedImageSrc.value = null;
+};
+
 onMounted(async () => await fetchData());
 </script>
 
@@ -22,7 +30,14 @@ onMounted(async () => await fetchData());
         <div class="q-pa-sm row items-start">
             <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
                 <QCard>
-                    <VnImg :id="myNew.image" storage="news" />
+                    <QImg
+                        :src="`${$app.imageUrl}/news/full/${myNew.image}`"
+                        @click="
+                            showImagePreview(
+                                `${$app.imageUrl}/news/full/${myNew.image}`
+                            )
+                        "
+                    />
 
                     <QCardSection>
                         <div class="text-h5">
@@ -46,7 +61,7 @@ onMounted(async () => await fetchData());
             >
         </QPageSticky>
     </div>
-    <QDialog v-model="showPreview" @hide="selectedImageSrc = ''">
+    <QDialog v-model="showPreview" @hide="hideImagePreview">
         <QImg :src="selectedImageSrc" />
     </QDialog>
 </template>