Nuxt•2mo ago

Does Vercel has issues with NuxtImg?

I am getting this error when I am building my project error: [404] Page not found: /_vercel/image?url=%252Fservices%252Fall-services.webp&w=1536&q=100

2 Replies

kapa.ai•2mo ago

Hi @Sagar Kapoor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that Vercel does have some specific requirements when using NuxtImg. The error you're encountering suggests there might be an issue with how the images are configured or accessed in your Vercel deployment. Here's what you need to know: 1. Vercel Provider: Nuxt Image has a specific provider for Vercel deployments, which is enabled by default when deploying to Vercel's platform. This provider uses Vercel's Edge Network to optimize images on demand Vercel Provider (https://image.nuxt.com/providers/vercel). 2. Sizes Configuration: Vercel requires you to explicitly list all the widths used in your app. This is crucial for proper image resizing. You need to specify every custom width used in <NuxtImg>, <NuxtPicture>, or $img Vercel Provider (https://image.nuxt.com/providers/vercel#sizes). 3. Domains Configuration: If you're using external URLs (images not in the public/ directory), you need to whitelist the hostnames in your configuration Vercel Provider (https://image.nuxt.com/providers/vercel#domains). To resolve your issue, try the following steps: 1. Ensure that your nuxt.config.ts file includes the necessary configuration for Vercel:

export default defineNuxtConfig({
  image: {
    vercel: {
      // Add your specific widths here
      sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    },
    domains: ['your-domain.com'], // Add your domain if using external images
  }
})

export default defineNuxtConfig({
  image: {
    vercel: {
      // Add your specific widths here
      sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    },
    domains: ['your-domain.com'], // Add your domain if using external images
  }
})

2. Make sure your images are placed in the correct directory. For local images, they should be in the public/ directory Default Provider (https://image.nuxt.com/get-started/providers#local-images). 3. Check that the image path in your <NuxtImg> component is correct. For example:

<NuxtImg src="/services/all-services.webp" width="1536" quality="100" />

<NuxtImg src="/services/all-services.webp" width="1536" quality="100" />

If you've followed these steps and are still encountering issues, it might be worth checking Vercel's deployment logs or reaching out to Vercel support for more specific assistance with their image optimization service. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@565461230060306432> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Does Vercel has issues with NuxtImg?