#nuxt-image dynamic file names 404ing in production

8 messages · Page 1 of 1 (latest)

novel spokeBOT
#

Hi @deep heart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

This issue is a common pitfall when using Nuxt Image (and NuxtPicture) with dynamic file names. In development, images in the assets directory can be resolved by the build tool, but in production, Nuxt Image expects static images to be in the public directory by default. If your images are in assets/ or another directory, they may not be available at runtime, resulting in 404 errors.

Key points from the knowledge sources:

#
  • By default, Nuxt Image expects images to be in the public/ directory. For example, <NuxtImg src="/nuxt-icon.png" /> requires the file to be at public/nuxt-icon.png. Images in assets/ are not processed by Nuxt Image in production, as those are handled by the bundler and may not be available at runtime for dynamic requests Nuxt Image Providers.
  • If you want to use a different directory (like assets/img), you must configure the image module in nuxt.config to set the dir option. For example:
    export default defineNuxtConfig({
  image: {
    dir: 'assets/img'
  }
})
    Then, you can use <NuxtImg src="/my-image.jpg" /> and it will look in assets/img/my-image.jpg NuxtImage returning 404.
  • Dynamic imports or dynamic file names (e.g., using a variable in the src) will only work if the files are present in the configured directory and are accessible at runtime. If the images are not in public/ or the configured dir, you will get 404s in production Nuxt Image Providers, NuxtImage returning 404.
  • If you use assets/ for images, you must ensure the build tool is configured to handle those file types, or move your images to public/ for static serving <img> not showing when using a dynamic import from assets as source.

How to fix:

  • Move your images to the public/ directory (e.g., public/img/home/bubbles/bubble-1.png).
  • Reference them with a leading slash: src="/img/home/bubbles/bubble-1.png".
  • If you want to keep them in a custom directory, set the image.dir option in nuxt.config accordingly.

Example:

# 
<NuxtPicture
  format="avif,webp"
  aria-hidden="true"
  alt="Bubble"
  quality="60"
  loading="lazy"
  :img-attrs="{ class: 'max-w-none' }"
  :src="`/img/home/bubbles/bubble-${bubble.imageIndex}.png`"
/>

Make sure the images exist at public/img/home/bubbles/bubble-1.png, etc.

Summary:
Your 404s in production are because Nuxt Image only serves images from public/ (or the configured dir). Move your images there and reference them with a leading slash. This will resolve the issue Nuxt Image Providers, NuxtImage returning 404.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

#

Let me check the knowledge base for you again. One moment! :books:

#

Thank you for clarifying that your images are in the public directory and referenced with a leading slash. Given that, and since it works in development but 404s in production, here are some possible causes and solutions based on the knowledge sources:

  1. Case Sensitivity and File Paths
    Double-check the exact file names and paths. Production servers (especially Linux) are case-sensitive, so /img/home/bubbles/bubble-1.png is different from /img/home/bubbles/Bubble-1.png. This is a common source of 404s that only appear in production.

  2. Build Output and Deployment
    Ensure that the public directory and all its contents are actually being deployed to your production server. Sometimes, deployment scripts or .gitignore settings can accidentally exclude files or folders.

  3. Nuxt Image Provider Configuration
    If you have customized the Nuxt Image provider or changed the dir option, make sure it matches your actual directory structure. The default provider (ipx) expects images in public/ unless configured otherwise Nuxt Image Providers.

  4. Dynamic File Names and Prerendering
    If you are using static site generation (nuxt generate) and your dynamic image paths are not referenced during the build, they may not be included in the prerendered output. In such cases, you may need to use the nitro.prerender.routes option to explicitly include those image routes Static Images.

#
  1. Sharp/IPX Errors in Production
    If you are using the default ipx provider and see errors related to the sharp module (such as [IPX_ERROR] Something went wrong installing the "sharp" module), this can cause images to 404 in production even if the files exist. This is often due to platform-specific binaries not being built correctly on your production server. The solution is to rebuild sharp for your production environment:
    npm rebuild --arch=x64 --platform=linux --libc=musl sharp
    This ensures the correct binaries are available for your server nuxt/image module in nuxt 3 causes problem in production.

Summary:
If your images are in public/ and referenced correctly, but you still get 404s in production, the most likely causes are case sensitivity, missing files in deployment, or a problem with the image optimization provider (like a sharp build issue). If you see IPX or sharp errors in your logs, try rebuilding sharp as shown above.

If none of these apply and you still have issues, the knowledge sources do not provide further details for your specific scenario.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: