<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>