get s3 url

front/components/getImage.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { useImagesStore } from '~/store/images';
 
-const props = defineProps(['file_id', 'type'])
+const props = defineProps(['file_id', 'image_aws_url', 'type'])
 const imagesStore = useImagesStore()
 
-const img = ref(imagesStore.getImage(props.file_id))
+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)
+    img.value = imagesStore.getImage(props.file_id, props.image_aws_url ? 'aws' : 'tg')
 }, { deep: true })
 </script>
 <template>

front/pages/table/[id].vue

@@ -73,8 +73,7 @@ const patchItem = async () => {
                                 <UButton @click="patchField(field)">Сохранить</UButton>
                             </span>
                             <span class="col-span-2">
-                                <NuxtImg v-if="field.image_aws_url" :src="field.image_aws_url" />
+                                <GetImage :file_id="field.file_id" :image_aws_url="field.image_aws_url" type="img" />
-                                <GetImage v-else :file_id="field.file_id" type="img" />
                             </span>
                         </li>
                     </ul>

front/pages/table/index.vue

@@ -81,7 +81,7 @@ const testCallback = (user: any) => {
                                 </span>
                                 <UBadge color="gray" v-else>no text</UBadge>
                                 <span class="inv_inner_image" v-if="el.file_id">
-                                    <GetImage :file_id="el.file_id" />
+                                    <GetImage :file_id="el.file_id" :image_aws_url="el.image_aws_url" />
                                 </span>
                                 <UBadge color="gray" v-else>no img</UBadge>
                             </li>

front/store/images.ts

@@ -1,17 +1,18 @@
 interface imagesList {
     [key: string]: {
         status: 'idle' | 'pending' | 'success' | 'error',
+        type: 'tg' | 'aws',
         result?: string
     }
 }
 export const useImagesStore = defineStore('images', {
     state: () => ({ list: {} as imagesList }),
     actions: {
-        getImage(name: string) {
+        getImage(name: string, type: 'tg' | 'aws') {
             if (!this.list[name]) {
                 this.list[name] = {
+                    type,
                     status: 'idle',
-                    // result: 'https://media.istockphoto.com/id/1490517357/photo/scientists-are-researching-and-analyzing-harmful-contaminants-in-the-laboratory.webp?s=170667a&w=0&k=20&c=Fh4t-P_b-a1QxwyBUzUa0AuLp8FLNyLy4hl4HUm82Ao='
                 }
             }
             if (!Object.values(this.list).filter(el => el.status == 'pending').length) {
@@ -20,14 +21,20 @@ export const useImagesStore = defineStore('images', {
             return this.list[name]
         },
         async loadOneImage(name: string) {
-            const file_url_data = await apiCall<string[]>(`tgbot/items/get_image/${name}/`)
+            let file_url_data
 
+            if (this.list[name].type == 'tg') {
+                file_url_data = await apiCall<string[]>(`tgbot/items/get_image/${name}/`)
+            } else if (this.list[name].type == 'aws') {
+                file_url_data = await apiCall<string[]>(`tgbot/items/get_image_s3/${name}/`)
+            }
             if (file_url_data.length > 0 && file_url_data[0] !== null) {
                 this.list[name].status = 'success'
                 this.list[name].result = file_url_data[0]
             } else {
                 this.list[name].status = 'error'
             }
+
             if (Object.entries(this.list).filter(el => el[1].status == 'idle').length) {
                 this.loadImages()
             }