Nuxt/Img not compatible with the nitro firebase preset

[crunchwrap89]

Environment

Node 20.5.1 or node 18, same issue. Nitro 2.7.2, also same issue in previous versions.

Reproduction

Follow official documentation https://nitro.unjs.io/deploy/providers/firebase

deploy a nuxt 3 app using Nuxt/Img

Describe the bug

Following the official docs for deploying a Nuxt application to firebase is not compatible with Nuxt/Img

https://nitro.unjs.io/deploy/providers/firebase

No images are visible and the console shows 404 error.

Additional context

firebase.json settings

  "functions": [
    {
      "source": ".output/server",
      "runtime": "nodejs20",
      "codebase": "default",
      "ignore": [".git", "firebase-debug.log", "firebase-debug.*.log"]
    }
  ],
  "hosting": [
    {
      "site": "geoquestr",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ],

It was the same issue with nuxt 3.7 and previous nuxt/img release candidates.

same issue when using node 18 environment.

Logs

GET https://geoquestr.com/_ipx/q_75&blur_5&s_50x25/posts/geoquestr-release.png 404 (Not Found)

[desk-pro]

Same problem here

[danbaechtold]

Here as well

[pi0]

Best way to help solving this issue to provide a minimal nitro reproduction (without nuxt and nuxt module).

[danbaechtold]

Thanks @pi0,

I'm not sure I'd know how to do so, without nuxt itself.

But here is what I found out so far:

• With Firebase Emulator (testing locally), it works just fine
• On Firebase, when opening the image URL, the server function get's called, but responds with: {"error":{"message":"[404] [IPX_FILE_NOT_FOUND] File not found: /logo.png"}}; But logo.png is in the .output/public folder.

Just in case you want to have a look: https://smartrails-test-website.web.app/

[pi0]

@danbaechtold would you be able to create a Nuxt repository? It would help me to quickly get into investigation.

[danbaechtold]

@pi0 Yes, here you go: https://github.com/danbaechtold/nuxt-img-fb (invited you) Result: https://smartrails-test-nuxtimgfb.web.app/

[crunchwrap89]

Is the problem due to public assets not available within the serverless function?

[crunchwrap89]

@pi0 could we remove the needs reproduction label from this? :) Thank you

[crunchwrap89]

@danbaechtold

I see now that there is a "workaround" for this issue by adding all the images to nitro.prerender.routes in nuxt.config.ts:

    prerender: {
      routes: ['/', '/sitemap.xml', '/rss.xml',
        '/_ipx/_/img/screenshot_dark.png',
        '/_ipx/_/img/screenshot_mobile_1.png',
        '/_ipx/h_550&f_webp&q_80/img/screenshot_mobile_1.png',
        '/_ipx/w_1100&q_80/img/screenshot_dark.png',
        '/_ipx/q_75&blur_5&s_50x25/img/screenshot_dark.png',
        '/_ipx/f_webp&q_75&blur_5&s_50x25/img/screenshot_mobile_1.png',
      ],
    },

[pi0]

@pi0 could we remove the needs reproduction label from this? :) Thank you

We need a minimal nitro-only reproduction still (https://github.com/unjs/nitro/issues/1867#issuecomment-2345863006 is helpful for first step of doing it)