c3lf-system-3/web/src/components/Lightbox.vue

<template>
    <Modal @close="$emit('close')">
        <template #body>
            <img
                class="img-fluid rounded mx-auto d-block mb-3 w-100"
                :src="`${baseUrl}/1/images/${file}`"
                alt="Image not available."
                id="lightbox-image"
            >
        </template>
        <template #buttons>
            <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
        </template>
    </Modal>
</template>

<script>
import Modal from '@/components/Modal';
import config from '../config';

export default {
    name: 'Lightbox',
    components: {Modal},
    props: ['file'],
    data: () => ({
        baseUrl: config.service.url,
    }),
};
</script>

<style>
#lightbox-image {
    max-height: 75vh;
    object-fit: contain;
}
</style>