image icon indicating copy to clipboard operation
image copied to clipboard

placeholder not working

Open adydetra opened this issue 1 year ago • 5 comments

It works in static images (public directory), but if I use from API placeholder it doesn't work. I also tried other than mastodon, like from supabase. same case, placeholder doesn't work.

<template>
  <div v-for="status in statuses" :key="status.id" class="flex space-x-4 bg-gray-300/30 first-letter:dark:bg-slate-800 p-4 text-gray-600 dark:text-gray-300">
    <div>
      <div class="flex justify-center items-center w-8 md:w-12 rotate-3 rounded-full">
        <NuxtImg src="/images/hero-mobile.webp" alt="Photo" placeholder loading="lazy" class="w-full h-full rounded-full shadow-md shadow-gray-500/40" />
      </div>
    </div>
    <div class="w-full overflow-hidden space-y-4">
      <NuxtLink :to="status.uri" title="Mastodon">
        <div class="flex justify-between items tracking-wide">
          <h2 class="text-xs flex items-center gap-1"><Icon name="line-md:mastodon" class="mr-0.5" />Dewa <span class="text-[7px]">🇮🇩</span></h2>
          <p class="text-xs"><Icon name="line-md:calendar" class="mr-1" />{{ formatDate(status.created_at) }}</p>
        </div>
      </NuxtLink>
      <p class="text-xs mt-4 leading-loose" v-html="status.content"></p>
      <NuxtImg :src="status.media_attachments[0]?.url" v-if="status.media_attachments.length > 0" alt="Photo" placeholder loading="lazy" class="object-contain" />
    </div>
  </div>
</template>

<script setup>
const statuses = ref([]);

onMounted(async () => {
  try {
    const response = await fetch("URL API, sorry I can't show it here");
    if (response.ok) {
      const data = await response.json();
      statuses.value = data;
    } else {
      console.error("Failed to fetch data from Mastodon API");
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
});

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${day}-${month}-${year}`;
};
</script>

adydetra avatar Sep 12 '23 10:09 adydetra