Bildvorschau fertig gemacht

src/views/Bildvorschau.vue

@@ -1,25 +1,35 @@
 <script lang="ts">
-import { RouterLink } from 'vue-router';
-import Navbar from '../components/Navbar.vue';
-import RitzenbergenLib from '../ritzenbergenlib';
-import Footer from '../components/Footer.vue';
+import { RouterLink } from "vue-router";
+import Navbar from "../components/Navbar.vue";
+import RitzenbergenLib from "../ritzenbergenlib";
+import Footer from "../components/Footer.vue";
+import $ from "jquery";
+
 export default {
   data() {
     return {
       ev: this.$route.params.ev,
       jahr: this.$route.params.jahr,
-                RitzenbergenLib
-            }
+      RitzenbergenLib,
+    };
   },
   computed: {
     bilder() {
-                return [
-                    "/erntefest/2011/pic01.jpg",
-                    "/erntefest/2011/pic02.jpg",
-                    "/erntefest/2011/pic03.jpg",
-                    "/erntefest/2011/pic04.jpg",
-                    "/erntefest/2011/pic05.jpg",
-                ];
+      let result: any[] = [];
+
+      $.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
+        async: false,
+        success(data: string) {
+          result=JSON.parse(data);
+        },
+        method: "GET",
+        data: {
+          ev: this.ev,
+          jahr: this.jahr
+        }
+      });
+
+      return result;
     },
     bildersplitted() {
       let result: any[] = [];
@@ -33,35 +43,37 @@ import Footer from '../components/Footer.vue';
     },
     einereihe() {
       return this.bilder.length <= 5;
-            }
+    },
   },
   components: {
     RouterLink,
     Navbar,
-            Footer
+    Footer,
   },
   methods: {
     capitalizeFirstLetter(str: string) {
       return str.charAt(0).toUpperCase() + str.slice(1);
-            }
-        }
-    }
+    },
+  },
+};
 </script>
 <template>
   <Navbar />
   <section class="galerie-section">
     <div class="galerie-container">
       <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
-        Vorschaubilder <br>
+      Vorschaubilder <br />
       {{ bilder.length }} Bilder
       <table>
         <tbody>
           <tr v-for="row in bildersplitted">
-                    <td v-for="column in row"><RouterLink to=""><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"></RouterLink></td>
+            <td v-for="column in row">
+              <RouterLink to=""
+                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
+              /></RouterLink>
+            </td>
           </tr>
-
         </tbody>
-                   
       </table>
     </div>
   </section>
@@ -79,7 +91,8 @@ import Footer from '../components/Footer.vue';
   border-collapse: collapse; /* Zellränder entfernen */
 }
 
-        th, td {
+th,
+td {
   padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
   text-align: center; /* Text in der Mitte ausrichten */
 }