On click change image

src/components/Hero.vue

@@ -6,7 +6,7 @@
       <img
         class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
         alt="Main camera" 
-        src="@/assets/mvsr-logo.png"
+        :src="mjpegSrc[clickMJ % 2]" @click="clickMJ++"
       />
     </div>
     <div
@@ -14,12 +14,12 @@
     >
       <Heading1>Preview</Heading1>
       <p class="mb-8 leading-relaxed dark:text-gray-300">
-        Zobrazuje snimku kazdych x sekund z {{ previewUrl }}
+        Zobrazuje snimku pri kliknuti
       </p>
       <img
         class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
         alt="Main camera" 
-        src="@/assets/mvsr-logo.png"
+        :src="previewSrc[clickPW % 2]" @click="clickPW++"
       />
       <p class="mb-8">
 	 Ovládanie dverí
@@ -43,6 +43,7 @@
 import { computed, defineComponent } from "vue-demi";
 import { routes } from "@/router";
 import { useDark, useToggle } from "@vueuse/core";
+import logoUrl from '@/assets/mvsr-logo.png';
 
 export default defineComponent({
   setup: (_, ctx) => {
@@ -50,9 +51,12 @@ export default defineComponent({
     const appName = import.meta.env.VITE_APP_NAME;
     const urlMjpeg = import.meta.env.VITE_APP_ESP32_MJPEG;
     const previewUrl = import.meta.env.VITE_APP_ESP32_PREVIEW;
+    var clickMJ = 0;
+    var clickPW = 0;
+    var previewSrc = [ logoUrl, previewUrl];
+    var mjpegSrc = [ urlMjpeg, logoUrl];
 
-
-    return { appName, urlMjpeg, previewUrl };
+    return { appName, previewSrc, mjpegSrc, clickMJ, clickPW };
   },
 });
 </script>