N
Nuxt•3mo ago
Thick Black W

nitro image caching problems

The server initially fetches the images and they display on the app side, however, once the server fetches from the cache (json), the deserialized file does not display the image on the app side. Here are the codes below. 
// /providers/my-provider
import { joinURL } from 'ufo'
import { createOperationsGenerator } from '#image'
import type { ProviderGetImage } from '@nuxt/image'
const operationsGenerator = createOperationsGenerator()
export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}, ctx) => {
  if (!baseURL) {
    // also support runtime config 
    baseURL = ctx.options.nuxt.baseURL
  }
  const operations = operationsGenerator(modifiers)
  return {
    url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
  }
}
// /providers/my-provider
import { joinURL } from 'ufo'
import { createOperationsGenerator } from '#image'
import type { ProviderGetImage } from '@nuxt/image'
const operationsGenerator = createOperationsGenerator()
export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}, ctx) => {
  if (!baseURL) {
    // also support runtime config 
    baseURL = ctx.options.nuxt.baseURL
  }
  const operations = operationsGenerator(modifiers)
  return {
    url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
  }
}
// somepage.vue
<NuxtImg
              provider="myProvider"
              :src="`api/image/${id}`"
            />
// (not caching here, yet.) 
// somepage.vue
<NuxtImg
              provider="myProvider"
              :src="`api/image/${id}`"
            />
// (not caching here, yet.)
4 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Thick Black W. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Thick Black W
Thick Black WOP•3mo ago
// server/api/image/[id].ts
import { get } from 'https'
export default defineCachedEventHandler(async (event) => {
   const id = event.context.params?.id;
   if (!id) {
      throw createError({
        statusCode: 400,
        statusMessage: 'Missing image ID',
      })
    }
    const imageUrl = `https://mycdn.com/${id}`
    try {
      return new Promise((resolve, reject) => {
        get(imageUrl, (res) => {
          const chunks: Buffer[] = []
          res.on('data', (chunk) => chunks.push(chunk))
          res.on('end', () => {
            setResponseHeaders(event, {
              'Content-Type': res.headers['content-type'] || 'image/jpeg',
            })
            resolve(Buffer.concat(chunks))
          })
        }).on('error', reject)
      })
    } catch (error) {
      console.error('Image fetch error:', error)
      throw createError({
        statusCode: 500,
        statusMessage: 'Failed to fetch image',
      })
    }
},
{
    maxAge: 60 * 60, // 1 hour
    shouldInvalidateCache: (event) => {
        // Only cache successful responses
        return event.node.res.statusCode !== 200;
    },
    // stale while revalidate here for learning purposes.
    swr: true, 
    staleMaxAge: 120, 
}
)
// server/api/image/[id].ts
import { get } from 'https'
export default defineCachedEventHandler(async (event) => {
   const id = event.context.params?.id;
   if (!id) {
      throw createError({
        statusCode: 400,
        statusMessage: 'Missing image ID',
      })
    }
    const imageUrl = `https://mycdn.com/${id}`
    try {
      return new Promise((resolve, reject) => {
        get(imageUrl, (res) => {
          const chunks: Buffer[] = []
          res.on('data', (chunk) => chunks.push(chunk))
          res.on('end', () => {
            setResponseHeaders(event, {
              'Content-Type': res.headers['content-type'] || 'image/jpeg',
            })
            resolve(Buffer.concat(chunks))
          })
        }).on('error', reject)
      })
    } catch (error) {
      console.error('Image fetch error:', error)
      throw createError({
        statusCode: 500,
        statusMessage: 'Failed to fetch image',
      })
    }
},
{
    maxAge: 60 * 60, // 1 hour
    shouldInvalidateCache: (event) => {
        // Only cache successful responses
        return event.node.res.statusCode !== 200;
    },
    // stale while revalidate here for learning purposes.
    swr: true, 
    staleMaxAge: 120, 
}
)
export default defineNuxtConfig({

  devtools: { enabled: true },

  image: {
    providers: {
      myProvider: {
        name: 'myProvider', // optional value to overrider provider name
        provider: '~/providers/my-provider.ts', // Path to custom provider
        options: {
          // ... provider options
          baseURL: ''
        }
      }
    }
  },
// ...
})
export default defineNuxtConfig({

  devtools: { enabled: true },

  image: {
    providers: {
      myProvider: {
        name: 'myProvider', // optional value to overrider provider name
        provider: '~/providers/my-provider.ts', // Path to custom provider
        options: {
          // ... provider options
          baseURL: ''
        }
      }
    }
  },
// ...
})
kapa.ai
kapa.ai•3mo ago
---------------------- Based on your description and the provided code, it appears you are using a custom Nuxt Image provider to serve images via an API route (e.g., api/image/${id}), and you are experiencing issues where images display initially but fail to display after the server fetches and deserializes data from JSON. Here are some key points and possible causes, based strictly on the knowledge sources: 1. Custom Provider Implementation
Your custom provider is correctly structured according to the Nuxt Image documentation. It generates a URL using the baseURL, src, and any modifiers. This is the expected approach for a custom provider in Nuxt Image. Make sure your provider is registered in nuxt.config.ts as shown in the docs, and that the provider attribute in <NuxtImg> matches the registered name Custom Provider Docs. 2. Image Source Path
When using a custom provider, the src you pass to <NuxtImg> should be the path your provider expects. In your case, :src="api/image/${id}" will be joined with the baseURL. Ensure that this results in a valid, accessible URL. If your API route is /api/image/:id, the resulting URL should be correct and the API should return a valid image response. 3. Caching and Serialization
The knowledge sources do not provide explicit details about image caching issues with Nitro or Nuxt Image when deserializing from JSON. However, they do mention that Nitro's caching layer can affect how requests are handled, especially with route rules and cache keys Nuxt Route Rules. If your API is cached and the cache does not include the correct headers or varies by query, you might serve stale or incorrect data. 4. Static vs. Dynamic Images
If you are generating a static site or using SSR, ensure that your images are available at build time or that your API can serve them at runtime. The Nuxt Image module expects images to be accessible either from the public/ directory or via a valid provider/API Providers and Local Images. 5. Debugging Steps
- Check the network tab in your browser's dev tools to see the actual image URL being requested and the response status. - Ensure your API route returns the correct Content-Type (e.g., image/jpeg or image/png) and a valid image binary. - If you are using Nitro's caching, review your route rules and cache configuration to ensure images are not being cached incorrectly or with the wrong key. 6. No Explicit Solution in Docs
The knowledge sources do not explicitly mention a known issue or a direct solution for "deserialized file does not display the image" in this context. If the image URL is correct and the API returns a valid image, it should display. If not, the issue may be with the API response or with how the provider constructs the URL. Summary:
Your custom provider setup matches the documented approach. The problem likely lies in the API response, the constructed image URL, or Nitro's caching configuration. Double-check the actual image URLs, API responses, and any caching rules that might affect dynamic image routes. If you need to control caching, consider using Nitro's routeRules to fine-tune cache behavior for your image API routes Route Rules. If you can provide more details about the API response or the exact error (e.g., 404, 500, broken image), I can help further. But based on the knowledge sources, there is no explicit mention of this specific deserialization/caching issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1321238874634195004> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?