How to make it work with Nuxt Image

[crunchwrap89]

Reproduction

https://github.com/posva/nuxt--vuefire-example-blaze-plan

Steps to reproduce the bug

When adding a <NuxtImage src='image.png'/> to any vuefire project and then deploying the app as a serverless function, then the NuxtImage doesnt work.

Expected behavior

NuxtImage should display images properly resized etc with IPX as default provider.

Actual behavior

Nuxt image Works locally with npm run dev, but not when deployed as a serverless function to firebase hosting.
( using npm build , npx firebase-tools deploy. )

Instead it does not display any image at all. Error in console is:

Failed to load resource: the server responded with a status of 404 ()

Additional information

nuxt.config.ts nitroconfig:

  nitro: {
    firebase: {
      nodeVersion: '20',
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 2,
      },
    },
    preset: 'firebase',
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
    compressPublicAssets: true,
  },

firebase.json

  {
  "database": {
    "rules": "database.rules.json"
  },
  "functions": [
    {
      "source": ".output/server",
      "runtime": "nodejs20",
      "codebase": "default",
      "ignore": [
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    },
    {
      "source": "functions",
      "codebase": "score-tracker",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ]
    }
  ],
  "hosting": [
    {
      "site": "geoquestr",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "**",
          "function": "server"
        }
      ]
    }
  ],
  "emulators": {
    "ui": {
      "enabled": true,
      "port": 4000
    },
    "auth": {
      "port": 9099
    },
    "database": {
      "port": 9001
    },
    "hosting": {
      "port": 5002

    },
    "singleProjectMode": true
  }
}