image
image copied to clipboard
placeholder not working
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>