N
Nuxt•5w ago
Omnislash

NuxtImg, custom query parameter on source

Hello, I allow my user to customize their logo on their page. However, since I always register it under the name "logo", the NuxtImg cache doesn't refresh and doesn't show the new logo The solution should be simple, adding the update timestamp as a query parameter of the source.... but the source is already customized with info like width, fit, aspect ratio.... So... how can I add a custom query parameter to my source ? Maybe there is actually a simpler solution ? Thanks ^^
2 Replies
kapa.ai
kapa.ai•5w ago
Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with caching and refreshing the logo in NuxtImg, there are a couple of approaches you can consider based on the information provided in the knowledge sources: 1. Using the raw parameter:
You can use the raw parameter to add custom query parameters to your image URL. This approach is mentioned in the ImageKit provider documentation, but it might work for other providers as well. Here's an example of how you could potentially use it: 
   <NuxtImg
     src="/logo"
     :modifiers="{
       raw: `timestamp=${Date.now()}`
     }"
   />
   
   <NuxtImg
     src="/logo"
     :modifiers="{
       raw: `timestamp=${Date.now()}`
     }"
   />
This would add a timestamp to the URL, ensuring that the image is refreshed each time it's loaded. 2. Using a computed property: Another approach is to use a computed property to generate the full source URL including the timestamp. This method gives you more control over the final URL: 
   <template>
     <NuxtImg :src="logoSrc" />
   </template>

   <script setup>
   const logoSrc = computed(() => {
     return `/logo?timestamp=${Date.now()}`
   })
   </script>
   
   <template>
     <NuxtImg :src="logoSrc" />
   </template>

   <script setup>
   const logoSrc = computed(() => {
     return `/logo?timestamp=${Date.now()}`
   })
   </script>
3. Leveraging Nuxt Image's cache-busting feature: According to a recent pull request in the Nuxt repository, there's a new feature to cache-bust payloads with a build ID. While this is not specifically for images, it suggests that Nuxt is working on improving cache management. You might want to check the latest Nuxt Image documentation to see if a similar feature has been implemented for images. GitHub PR: fix(nuxt): cache-bust payloads with build id (https://github.com/nuxt/nuxt/pull/26068) It's important to note that the exact implementation might depend on the specific image provider you're using with Nuxt Image. Some providers might have their own methods for cache busting or handling dynamic images. If these solutions don't work for your specific setup, you might need to consult the documentation for your particular image provider or consider creating a custom provider that handles this use case. Remember to test thoroughly to ensure that the cache-busting doesn't negatively impact performance, especially if the logo doesn't change frequently. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5w ago
<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?