front part

front/components/getImage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps(['file_id'])
+
+import { apiBase } from '~/helpers';
+const headers = new Headers();
+headers.append("Content-Type", "application/json");
+
+const file_url_data = await $fetch(`${apiBase}/tgbot/items/get_image/${props.file_id}/`, { headers })
+const file_url = file_url_data[0]
+const isOpen = ref(false)
+const openImage = () => {
+    isOpen.value = !isOpen.value
+}
+</script>
+<template>
+    <a href="#">
+        <Icon name="i-mdi-image" @click="openImage" />
+    </a>
+    <UModal v-model="isOpen">
+        <img :src="file_url" />
+    </UModal>
+</template>

front/pages/table/index.vue

@@ -41,6 +41,7 @@ const columns = [
                 <ul>
                     <li v-for="el in item.field">
                         {{ el.field.name }}
+                        <GetImage :file_id="el.id" />
                     </li>
                 </ul>
             </template>