IPX Bad request with firebase storage images (partially encoded url)

I’m trying to setup nuxt-image for my firebase-hosted images for my static site, and have done the following setup.

Edit: I was able to successfully use nuxt-image with a sample image from unsplash, but it didn’t work using my custom images from firebase. The problem seems to be how the image link is handled.

nuxt.config.js

  target: 'static',
  buildModules: ["vue-notion/nuxt", "@nuxtjs/prismic", '@nuxt/image'],
  image: {
    domains: ['https://firebasestorage.googleapis.com'],
    // adding or removing alias didn't seem to change anything here
    alias: {
      google: 'https://firebasestorage.googleapis.com'
    }
  },

I then use nuxt-img here with one of my images

<nuxt-img
      class="test"
      src="https://firebasestorage.googleapis.com/v0/b/XXX.appspot.com/o/deals_images%2FKFC%2Fassets%2FKFC_Logo?alt=media&token=5f9afab6-1b8b-41e1-ac2d-83d83cad039c"
      sizes="sm:100px md:200px lg:500px"
    />

However, I see this error in the console when i do npm run dev and the image is missing.

GET http://localhost:3000/_ipx/w_200/https://firebasestorage.googleapis.com/v0/b/XXX.appspot.com/o/deals_images%2FKFC%2Fassets%2FKFC_Logo%3Falt=media%26token=5f9afab6-1b8b-41e1-ac2d-83d83cad039c 400 (IPX: Bad Request)

Am I missing anything to use nuxt-image to get responsive images for my static site?

Image link: https://firebasestorage.googleapis.com/v0/b/XXX.appspot.com/o/deals_images%2FKFC%2Fassets%2FKFC_Logo?alt=media&token=5f9afab6-1b8b-41e1-ac2d-83d83cad039c

Edit: Here’s another firebase storage image link to try, it still doesn’t work for me. Could it be something to do with firebase storage image URLs?

https://firebasestorage.googleapis.com/v0/b/amber-prod.appspot.com/o/images%2Fwatch-dogs-2-sitara-dhawan-render-3-woman-holding-black-and-blue-tumbler-png-clipart_1593206709107?alt=media&token=a42c3f00-89d2-4ce1-9893-da0a5c039f6e

[gabrielsze]

I’ve came up with a solution on a fork I have on the ipx repo, which basically checks for firebase storage image URLs and handles them (slightly separately). I’ll probably put up a PR on the ipx repo end and link it over to this for reference.

[shadow81627]

I think ipx is decoding the url it gets so is making the request to firebase as deals_images/Yole/Burger-King-Singapore-Promotion-October-2019-1024x1024.jpg

ipx provider encode src here https://github.com/nuxt/image/blob/main/src/runtime/providers/ipx.ts#L29 ipx decode here https://github.com/unjs/ipx/blob/main/src/middleware.ts#L31