50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
<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> |