NuxtImage with IPX Provider Returns 404 for Images on Firebase Hosting

Question

I've deployed a Nuxt 3 application with Server-Side Rendering (SSR) on Firebase, utilizing Firebase Hosting and Cloud Functions. My app uses the Nuxt Image module with the default IPX provider for image optimization. While everything functions as expected in the local development environment, I encounter a persistent issue in production: all optimized images return a 404 Not Found error.

Example issue:

In production, attempting to access optimized images via URLs structured like /_ipx/f_webp&s_1460x722/images/hero.png results in a 404 error. These URLs are generated by the Nuxt Image module and work without issue locally.

Example use (default configuration):

<NuxtPicture src="/hero.png" preload sizes="sm:100vw lg:1460px" height="722" width="1460" alt="Hero billede" :img-attrs="{ class: 'w-full' }" />

Does anyone know how to fix this?

Answer 1

You have:

Client Browser
       │
       ├─ Request /_ipx/.../hero.png
       │
Firebase Hosting
       │
       ├─ 404 Not Found (/_ipx/.../hero.png not directly available as a static asset)
       │
Nuxt Server (Cloud Functions)
       └─ IPX Provider (Image optimization not reached)

Meaning you need to make sure requests for optimized images are correctly handled by the Nuxt server (Cloud Functions in your case, not Nitro), where the IPX provider (the built-in and self-hosted image optimizer for Nuxt Image) can process them.

You would need to adjust your Firebase Hosting configuration (firebase.json) to rewrite image requests to your Cloud Function serving the Nuxt app: add a rewrite rule for your image optimization URLs. That should redirect requests to paths starting with /_ipx to your Cloud Function instead of looking for static files in Firebase Hosting.

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/_ipx/**",
        "function": "nuxtServer"
      },
      {
        "source": "**",
        "function": "nuxtServer"
      }
    ]
  }
}

Replace "nuxtServer" with the name of your Cloud Function serving the Nuxt application if it is different.
See "Direct requests to a function" if your function has an ID, region and pinTag.

After editing firebase.json, deploy the changes to Firebase Hosting and your Cloud Function (firebase deploy).

---

Unfortunately, it doesn't work either. Same issue with 404 error.

Then here are a few points I would recommend you check out:

Make sure your Cloud Function named server (as referenced in the firebase.json) is deployed and active. That function should be responsible for serving your Nuxt application. You can check the status of your functions in the Firebase Console under the Functions section.

After verifying the deployment, review the logs for the server Cloud Function in the Firebase Console. These logs might provide insights into why the requests to /_ipx/** are not being processed as expected. Look for errors or warnings that could indicate a misconfiguration or a runtime issue.

Make sure your Nuxt server configuration is set up to handle requests for dynamic content correctly, especially for routes starting with /_ipx. That might involve reviewing your Nuxt configuration files (nuxt.config.js or nuxt.config.ts) to make sure the IPX provider is correctly configured and that there are no conflicting settings.

Double-check the Nuxt Image module configuration within your Nuxt project. Make sure that the module is correctly installed, configured, and that the IPX provider is enabled. Also, review any version-specific considerations that might affect how the module operates in a production environment.

Consider the possibility of caching issues with Firebase Hosting. After deploying changes to your Firebase Hosting configuration or your Cloud Function, clear your browser cache or try accessing the optimized images using a different browser or an incognito window to rule out caching issues.

Make sure the paths to your images are correct and that the images exist in the expected directory within your project structure. The path specified in the <NuxtPicture> component should correctly point to the location of the images in your project.

Check that your Firebase Hosting and the Cloud Function (server) are deployed in the same region. Mismatches in regions can sometimes cause unexpected behavior, although it is less likely to result in a 404 error.

---

Full error object: {"error":{"message":"[404] [IPX_FILE_NOT_FOUND] File not found: /images/hero.png"}}

As the images are generated on the fly, there are no images to place in the public directory when the app is built.

True: since IPX generates images on-the-fly, these optimized images do not exist in the public directory at build time. Instead, they are created dynamically in response to requests, which is why placing them in the public directory is not a viable solution.

Firebase Hosting primarily serves static files and does not directly support server-side generation of files (like those generated by IPX) to be stored back into the hosting environment. The IPX module generates images on-the-fly, and these images are usually cached in memory or a temporary filesystem, not stored as static files in Firebase Hosting.

If the direct handling of images through IPX and Firebase Hosting continues to present issues, consider using Cloud Storage for Firebase to store your images. You can then use a Cloud Function to serve optimized images from Cloud Storage: create a Cloud Function that reads the requested image from Cloud Storage, optimizes it with IPX (or another library), and then serves it. That function would handle requests to /_ipx/**.

That would bypass the need for Firebase Hosting to directly serve the optimized images and utilizes Cloud Storage, which is more suited for dynamic content and file storage. You would need to adjust your <NuxtPicture> component or URL construction to point to this Cloud Function for image optimization.