nuxt / nuxt/image

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

Open
#435 16 comments 0 reactions 0 assignees View on GitHub

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?

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.