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

[gabrielsze]

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

[shadow81627]

Duplicate of #392

[gabrielsze]

Hey @shadow81627 I've came across that but I don't think it's the same issue, I've tried with alias but still doesn't work. In fact, my URL is re-routed correctly, unlike #392.

[gabrielsze]

I have created a repro here as well - https://github.com/gabrielsze/nuxtStaticTest

the image is found in the home page, /pages/index.vue

• npm run dev
• open localhost
• 400 ipx bad request with firebase image

[gabrielsze]

Ok I'm here with another update after having a look. I noticed firebase storage images that are uploaded in the root directory works fine, mainly the one @dosstx provided with, and the one I uploaded myself into the root file which looks as such:

https://firebasestorage.googleapis.com/v0/b/XXX.appspot.com/o/Burger-King-Singapore-Promotion-October-2019-1024x1024.jpg?alt=media&token=d8ecc490-b81d-4610-9271-5d2dd7b229fe

This link above actually works perfect in the nuxt-image.

However, I noticed an interesting behavior once i uploaded an image into a subdirectory, and generated that firebase URL, it fails when placed as src inside the nuxt-image, for example (same image, but different location),

firebasestorage.googleapis.com/v0/b/XXX/o/_dealsimages%2FYole%2FBurger-King-Singapore-Promotion-October-2019-1024x1024.jpg?alt=media&token=c4aa31a8-3a82-4c3c-918b-f3e8020aae9e

I noticed something weird about the URL where the first part of the URL is actually decoded (in bold), but the second half of the URL (in italics) is encoded. This seems to be the default behavior when uploading images onto firebase storage. (https://stackoverflow.com/questions/66419381/get-non-percent-encoded-url-from-firebase-storage)

You can't control the download URLs that Firebase Storage generates. You'll have to treat them as opaque strings that reference the file.

Could this be an issue why it's not handled properly by the service - Any possibility of handling these annoying firebase URL links? 😢

[dosstx]

Possibly something along the lines of what @pi0 was alluding to ? https://github.com/nuxt/image/issues/392#issuecomment-904457648

[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

[gabrielsze]

Hey @shadow81627, that's a nice catch. Once it decodes the entire URL, the image string is no longer valid. That's where i think the bad request happens.

Perhaps a solution would be to check for a firebase storage URL with this format and not decoding it since we have to "treat them as opaque strings that reference the file."

firebasestorage.googleapis.com/v0/b/{projectId}.appspot.com/o/

[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.

[dosstx]

yea, I am trying to use firebase storage as cloud storage for my images and this would be a good fix. thanks.

[wtpalexander]

Any luck getting this merged @gabrielsze?

[dosstx]

I am dealing with this problem now. What is the latest solution? Anyone using the Nuxt 3 version of this module and fetching Firebase storage items via Cloudinary fetch type?

[vis97c]

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.

[alimozdemir]

I wonder what is the situation here. When I look for alternative implementation on NextJS they are exposing it with encoded url e.g.

www.domain.com/images?url=https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt.jpg

With nuxt image it is e.g.

www.domain.com/_ipx/s_320x200/https://github.com/nuxt/nuxt.jpg

And whenever we have an encoded thing in the image url we end up with this problem. I think they are doing it with a purpose.

Covering the URL with encodeURIComponent/decodeURIComponent would solve the problem I suppose but I'm not sure where is it handled so I can't raise a PR for it right now. But let me show you what I mean

there is a %2f in the URL

encodeURIComponent("https://github.com/nuxt/nuxt%2f.jpg")

output: https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt%252f.jpg url: www.domain.com/_ipx/s_320x200/https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt%252f.jpg

Whenever the lib wants to consume, it should decode it

decodeURIComponent('https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt%252f.jpg')

output: https://github.com/nuxt/nuxt%2f.jpg

So we preserved %2f while passing the data.

Let me know what do you think @pi0

[dosstx]

Yes, that is how I handled my problem with the FIrebase Storage URLs and using Nuxt Img. Here is very basic level for clarity:

<template>
    <div>
        <NuxtImg :src="fixedUrl" />
    </div>
</template>

<script setup lang="ts">
const url = ref('https://firebasestorage.googleapis.com/v0/b/bedtimeapp-stories/o/kRUx8ZxLoUd0y7kTcxgPfwTiGu13%2Fstory-images%2FfileNameHere.png?alt=media&token=400246d4-d7ea-4169-a420-e837fefe040a')

const splicedImgUrl = url.value.replace('https://firebasestorage.googleapis.com/v0/b/bedtimeapp-stories/o/', '')

console.log('splicedImgUrl: ', splicedImgUrl)

const encodedImagePath = encodeURIComponent(splicedImgUrl)

console.log('encodedImagePath: ', encodedImagePath)

const fixedUrl = 'https://firebasestorage.googleapis.com/v0/b/bedtimeapp-stories/o/' + encodedImagePath

</script>

[AsgarovAsgar]

@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?

[anthony32773]

Has anyone discovered a fix for this issue? @gabrielsze Did you manage to fix this? I am encountering the same issue.