40 lines
1.3 KiB
Vue
40 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useImagesStore } from '~/store/images';
|
|
|
|
const props = defineProps(['file_id', 'image_aws_url', 'type'])
|
|
const imagesStore = useImagesStore()
|
|
|
|
const img = ref(imagesStore.getImage(props.file_id, props.image_aws_url ? 'aws' : 'tg'))
|
|
const isOpen = ref(false)
|
|
|
|
const openImage = () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
watch(imagesStore, () => {
|
|
img.value = imagesStore.getImage(props.file_id, props.image_aws_url ? 'aws' : 'tg')
|
|
}, { deep: true })
|
|
</script>
|
|
<template>
|
|
<template v-if="img.status == 'success'">
|
|
<template v-if="props.type == 'img'">
|
|
<NuxtImg :src="img.result" />
|
|
</template>
|
|
<template v-else>
|
|
<a href="#" @click.prevent="openImage">
|
|
<Icon name="i-mdi-image" />
|
|
</a>
|
|
<UModal v-model="isOpen" :ui="{ width: 'w-full', }">
|
|
<img :src="img.result" />
|
|
</UModal>
|
|
</template>
|
|
</template>
|
|
<template v-else-if="img.status == 'error'">
|
|
<Icon name="i-mdi-close-circle-outline" />
|
|
</template>
|
|
<template v-else-if="img.status == 'pending'">
|
|
<Icon name="i-mdi-reload" />
|
|
</template>
|
|
<template v-else-if="img.status == 'idle'">
|
|
<Icon name="i-mdi-progress-question" />
|
|
</template>
|
|
</template> |