How to make nitro firebase preset 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
  }
}

[crunchwrap89]

Hello,
Did anyone get NuxtImg to work with the nitro firebase preset? I.e deploying the app as a cloud function?

I am a bit desperate for help here :/

[mgav]

How did you finally (hopefully) get this to work?

[crunchwrap89]

I had to add each image output to the nuxt.config.ts like this:

nitro: {
    prerender: {
      routes: [
'/_ipx/f_webp&q_90&s_28x35/img/brand/gq_pin.webp',
 '/_ipx/f_webp&q_90&s_56x70/img/brand/gq_pin.webp',
      '/_ipx/f_webp&q_10&blur_5&s_28x35/img/brand/gq_pin.webp',
]
    },
  },

I wouldnt say the problem is solved, but its a workaround

[mgav]

Ugh, if you have lots of them that's a pain, but at least it works. I'm not at all an expert developer and I've never used VueFire, but consider VueFire's image management: https://vuefire.vuejs.org/guide/storage.html