ImageModal Bilder

ui/src/components/CalendarDoor.vue

@@ -1,6 +1,5 @@
 <template>
-  <ImageModal v-model="modal_visible" />
-
+  <ImageModal v-model="modal_visible" :imageUrl="image_url" />
   <button class="button" @click="modal_visible = true">
     Türken {{ day + 1 }}
   </button>
@@ -21,6 +20,10 @@ import ImageModal from "./ImageModal.vue";
 export default class CalendarDoor extends Vue {
   day!: number;
   modal_visible = false;
+
+  private get image_url(): string {
+    return "http://localhost:8000/api/days/picture/" + this.day;
+  }
 }
 </script>
 

ui/src/components/ImageModal.vue

@@ -4,7 +4,7 @@
 
     <div class="modal-content">
       <!-- <p class="image is-4by3"> -->
-      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="" />
+      <img :src="imageUrl" alt="" />
       <!-- </p> -->
     </div>
   </div>
@@ -16,10 +16,12 @@ import { Options, Vue } from "vue-class-component";
 @Options({
   props: {
     modelValue: Boolean,
+    imageUrl: String,
   },
 })
 export default class ImageModal extends Vue {
   modelValue!: boolean;
+  imageUrl!: string;
 
   public created(): void {
     window.addEventListener("keydown", (e) => {