Added images

src/components/ImageRender.vue

@@ -0,0 +1,50 @@
+<template>
+    <img v-if="image.filename" :src="`/images/uploads/${image.filename}`" :alt="image.title" :title="image.title"
+        class="image" />
+</template>
+
+<script>
+import axios from '@/axios';
+import { reactive } from 'vue';
+
+export default {
+    name: 'ImageRender',
+    props: {
+        id: {
+            type: Number,
+            required: true,
+        },
+    },
+    setup(props) {
+        const image = reactive({
+            filename: '',
+            title: '',
+            description: '',
+            uploadDate: '',
+            pageId: null,
+        });
+
+        const fetchImage = async () => {
+            try {
+                const response = await axios.get('/image/' + props.id);
+                Object.assign(image, response.data);
+            } catch (error) {
+                console.log('Fehler beim Abrufen eines Bildes', error);
+            }
+        };
+
+        fetchImage();
+
+        return {
+            image,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.image {
+    max-width: 400px;
+    max-height: 300px;
+}
+</style>