fix

components/bigImage.vue

 <script setup>
 <script setup>
-import { ref, defineProps } from 'vue';
-const props = defineProps(['src']);
+import { ref } from 'vue'
+
+defineProps({
+    src: {
+        type: String,
+        required: true,
+    },
+    alt: {
+        type: String,
+        default: '',
+    },
+})
+
+const isOpen = ref(false)
 
 
-const popupImage = ref(null);
 const open = () => {
 const open = () => {
-    popupImage.value.style.display = 'block';
-};
+    isOpen.value = true
+}
 
 
 const close = () => {
 const close = () => {
-    popupImage.value.style.display = 'none';
+    isOpen.value = false
 }
 }
-
 </script>
 </script>
 
 
-<img class="original-image" :src="props.src" @click="open()">
+<template>
+    <figure class="big-image">
+        <img class="original-image" :src="src" :alt="alt" @click="open">
 
 
-<div class="popup-image" ref="popupImage" @click="close">
-    <img :src="props.src" @click="$event.stopPropagation()" />
-</div>
+        <div v-show="isOpen" class="popup-image" @click="close">
+            <img :src="src" :alt="alt" @click.stop>
+        </div>
+    </figure>
+</template>
 
 
 <style>
 <style>
+.big-image {
+    margin: 0;
+}
+
 .original-image {
 .original-image {
     margin-bottom: 20px;
     margin-bottom: 20px;
     cursor: pointer;
     cursor: pointer;
+    display: block;
 }
 }
+
 .popup-image {
 .popup-image {
     position: fixed;
     position: fixed;
     width: 100%;
     width: 100%;
@@ -32,8 +52,8 @@ const close = () => {
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     z-index: 30;
     z-index: 30;
-    display: none;
 }
 }
+
 .popup-image img {
 .popup-image img {
     position: absolute;
     position: absolute;
     top: 50%;
     top: 50%;