IPX Bad request with firebase storage images (partially encoded url)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the nuxt.config.js image settings and the usage shown, then reproduce the 400 response with the provided Firebase Storage URLs. Compare the generated _ipx request with the partially encoded URL; done means the image loads through IPX or the Firebase URL limitation is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- firebase, nuxtjs
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100