image: 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?
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?
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 16 (6 by maintainers)
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.
Has anyone discovered a fix for this issue? @gabrielsze Did you manage to fix this? I am encountering the same issue.
@dosstx I created a test page and then added the same code. But it did not work. Could you share your nuxt.config.ts file, please?
Using alias, as stated here is the workaround. https://github.com/nuxt/image/issues/392#issuecomment-904457648 (Possible duplicate)
That partially fixes the issue. Firebase uses %2f for slashes but NuxtImg converts those to real / breaking the url mapping.
Replacing % with %25 should do the trick, until a propper fix comes around.
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.jpgipx 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
Possibly something along the lines of what @pi0 was alluding to ? https://github.com/nuxt/image/issues/392#issuecomment-904457648