placeholder not working

[adydetra]

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>

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[djixadin]

he probably means that it doesn't generate a placeholder based on the URL he provides. I have a different bug that it seems to me when I try it that it doesn't work with images stored locally but it works when providing a full URL. Maybe its because rc2 isn't released? I mean you put a format option in nuxt config in the official docs but that's still not released

[adydetra]

he probably means that it doesn't generate a placeholder based on the URL he provides. I have a different bug that it seems to me when I try it that it doesn't work with images stored locally but it works when providing a full URL. Maybe its because rc2 isn't released? I mean you put a format option in nuxt config in the official docs but that's still not released

Can you put a bit of your code here? Just as an example for your case

[djixadin]

i tried couple of things at least with rc1 and have discovered that when linking a placeholder image it only works if that image is in public folder and it doesnt work when the image is in dir folder defined in the image config. not sure if thats intended but theres that

[yeremiaChris]

<script setup lang="ts"> defineProps<{ src?: string }>(); const img = useImage(); </script> <template> <NuxtImg :src="src" :placeholder="img(src, { h: 10, f: 'png', blur: 2, q: 50 })" class="w-full h-full object-cover rounded-md shadow-2xl" /> </template>

this placeholder not work on production

[daktas]

<script setup lang="ts"> defineProps<{ src?: string }>(); const img = useImage(); </script> <template> <NuxtImg :src="src" :placeholder="img(src, { h: 10, f: 'png', blur: 2, q: 50 })" class="w-full h-full object-cover rounded-md shadow-2xl" /> </template>

this placeholder not work on production

did you found the solution?