Ver código fonte

feat(Post): добавлено кэширование изображений для компонента Post

horanchikk 4 meses atrás
pai
commit
44163086c0
1 arquivos alterados com 10 adições e 3 exclusões
  1. 10 3
      components/Wall/Post.vue

+ 10 - 3
components/Wall/Post.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col gap-2 text-foreground bg-background-100 rounded-lg overflow-hidden">
     <NuxtImg
-      :src="$props.image"
+      v-if="cachedSrc"
+      :src="cachedSrc"
       :alt="'Возникла проблема с загрузкой фото, попробуйте позже.'"
       class="h-[200px] object-cover object-center"
       :height="200"
       :custom="true"
-      :quality="10"
       v-slot="{ src, isLoaded, imgAttrs }"
     > 
       <img
@@ -16,6 +16,8 @@
       >
       <div v-else class="w-full h-[200px] loading" />
     </NuxtImg>
+    <div v-else class="w-full h-[200px] loading" />
+
     <div class="px-2 leading-none text-xl font-semibold">
       {{ $props.title }}
     </div>
@@ -29,10 +31,15 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const { $getCachedUrl } = useNuxtApp()
+
+const props = defineProps<{
   image?: string
   title?: string
   description?: string
   date?: string
 }>()
+
+const cachedSrc = ref()
+onMounted(async () => cachedSrc.value = await $getCachedUrl(props.image))
 </script>